我尝试在模态窗口中点击一张图片，但点击后什么也没显示。代码如下：
超文本标记语言
<!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">×</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";
}
});在控制台中，我得到这个错误：
Uncaught TypeError: Cannot set properties of null (setting 'src')
at HTMLImageElement.<anonymous> (seccion1.js:11:22)我试着调试image.src，它得到了正确的路径。我想知道如何使用modal-content类的src显示图像。
2条答案
按热度按时间igetnqfo1#
在html中没有
#modal-content。svmlkihl2#
在HTML代码中，
modal-content是一个类，而不是一个id，所以当你调用getElementById时，它会返回null，只需在modal-content元素中添加一个id。