我正在尝试为自己构建一个模态图像库，但遇到了一个问题:分配给我的模态的 div 没有被 JS 拾取。我的脚本标签位于文件末尾，我已将 div 定义为变量。我认为这可能是一个范围问题，但我是一个初学者:
var gallery = document.querySelectorAll('.modalImg');
var modal = document.querySelectorAll('#myModal');
var modalView = document.querySelectorAll('#img01');
var caption = document.querySelectorAll('#caption');
modalUp();
function modalUp(){
for(var i = 0; i < gallery.length; i++) {
gallery[i].addEventListener("click", function(){
modal.style.display = "block";
modalView.src = this.src;
caption.innerHTML = this.alt;
});
};
};
<body>
<div class="gallery">
<img class="modalImg" src="1.jpg" alt="Fish">
<img class="modalImg" src="2.jpg" alt="Vroom">
</div>
<!-- Empty Modal Box -->
<div class="modal" id="myModal">
<img class="modalView" id="img01">
<div id="caption"></p>
</div>
</body>
<script src="modaltest.js" type="text/javascript" charset="utf-8" async defer></script>
</html>
单击其中一张图像时出现的错误:modaltest.js:12 Uncaught TypeError: Cannot set property 'display' of undefined 在 HTMLImageElement 处。 (modaltest.js:12)
我觉得我在这里遗漏了一些基本的东西，但我发现没有其他问题非常相关。
最佳答案
modal 是元素的集合(即使它只包含一个元素)。要么使用
var modal = document.querySelector("#myModal");
或者使用古老的
var modal = document.getElementById('myModal');
仅查找一个元素或访问集合的第一个元素
modal[0]
关于javascript - 无法设置未定义的属性 - 模态库 - 可能的范围问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50784158/