英文:
How to display an image clicking on it using modal window on HTML, CSS and JS
问题
在控制台中，你会看到以下错误：
Uncaught TypeError: Cannot set properties of null (setting 'src')
at HTMLImageElement.<anonymous> (seccion1.js:11:22)
这个错误表示在尝试设置图片的 src 属性时出现了问题。问题在于你在JavaScript中使用了错误的ID，应该使用 modal-content 而不是 modalContent。请将以下行更正：
const modalContent = document.getElementById("modal-content");
然后，你的代码应该能够正常工作，以根据所点击的图像显示模态窗口中的图像。
英文:
I'm trying to show an image when I click on it using a modal window, but, when I click on it doesn't display anything. The code is the following:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Seccion 1</title>
<link rel="stylesheet" href="seccion1.css">
</head>
<body>
<div class="container">
<img src="./Seccion1/pueblodesal2.png" alt="Imagen central" class="center-image">
<div class="image-grid">
<img src="./Seccion1/1.jpg" alt="Imagen 1" class="grid-image" data-src="./Seccion1/1.jpg">
<img src="./Seccion1/2.jpg" alt="Imagen 2" class="grid-image" data-src="./Seccion1/2.jpg">
<img src="./Seccion1/3.jpg" alt="Imagen 3" class="grid-image" data-src="./Seccion1/3.jpg">
<img src="./Seccion1/4.jpg" alt="Imagen 4" class="grid-image" data-src="./Seccion1/4.jpg">
<img src="./Seccion1/5.jpg" alt="Imagen 5" class="grid-image" data-src="./Seccion1/5.jpg">
<img src="./Seccion1/6.jpg" alt="Imagen 6" class="grid-image" data-src="./Seccion1/6.jpg">
<img src="./Seccion1/7.jpg" alt="Imagen 7" class="grid-image" data-src="./Seccion1/7.jpg">
<img src="./Seccion1/8.jpg" alt="Imagen 8" class="grid-image" data-src="./Seccion1/8.jpg">
<img src="./Seccion1/9.jpg" alt="Imagen 9" class="grid-image" data-src="./Seccion1/9.jpg">
<img src="./Seccion1/10.jpg" alt="Imagen 10" class="grid-image" data-src="./Seccion1/10.jpg">
<img src="./Seccion1/11.jpg" alt="Imagen 11" class="grid-image" data-src="./Seccion1/11.jpg">
<img src="./Seccion1/12.jpg" alt="Imagen 12" class="grid-image" data-src="./Seccion1/12.jpg">
<img src="./Seccion1/13.jpg" alt="Imagen 13" class="grid-image" data-src="./Seccion1/13.jpg">
<img src="./Seccion1/14.jpg" alt="Imagen 14" class="grid-image" data-src="./Seccion1/14.jpg">
<img src="./Seccion1/15.jpg" alt="Imagen 15" class="grid-image" data-src="./Seccion1/15.jpg">
<img src="./Seccion1/16.jpg" alt="Imagen 16" class="grid-image" data-src="./Seccion1/16.jpg">
<img src="./Seccion1/17.jpg" alt="Imagen 17" class="grid-image" data-src="./Seccion1/17.jpg">
</div>
<div id="modal" class="modal">
<span class="close">&times;</span>
<img src="" alt="Modal image" class="modal-content">
</div>
</div>
<script src="seccion1.js"></script>
</body>
</html>
JS
const images = document.querySelectorAll(".grid-image");
const modal = document.getElementById("modal");
const modalContent = document.getElementById("modal-content");
const closeBtn = document.querySelector(".close");
images.forEach((image) => {
image.addEventListener("click", () => {
modal.style.display = "block";
console.log(image.src)
modalContent.src = image.src;
});
});
closeBtn.addEventListener("click", () => {
modal.style.display = "none";
});
window.addEventListener("click", (event) => {
if (event.target == modal) {
modal.style.display = "none";
}
});
In the console I get this error:
Uncaught TypeError: Cannot set properties of null (setting 'src')
at HTMLImageElement.<anonymous> (seccion1.js:11:22)
I try to debug the image.src and it gets the correct path. I'd like to know how to display the image using the src at class modal-content.
答案1
得分: 2
你的HTML中没有#modal-content。
英文:
You don't have #modal-content in html.
<img src="" alt="Modal image" id="modal-content" class="modal-content">
答案2
得分: 1
在你的HTML代码中，modal-content 是一个类(class)，而不是一个id，所以当你调用 getElementById 时，它会返回 null。只需给 modal-content 元素添加一个id。
<img src="" alt="模态框图片" class="modal-content" id="modal-content">
英文:
In your HTML code, modal-content is a class, not an id, so when you call getElementById, that returns null. Just add an id to the modal-content element.
<img src="" alt="Modal image" class="modal-content" id="modal-content">
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论