时间戳

首页 > 解决方案 > 无法设置未定义的属性 - 模态库 - 可能的范围问题？

javascript - 无法设置未定义的属性 - 模态库 - 可能的范围问题？

问题描述

我正在尝试为自己构建一个模态图像库，但遇到了分配给我的模态的 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 at HTMLImageElement。(modaltest.js:12)

我觉得我在这里遗漏了一些基本的东西，但没有其他我能找到非常相关的问题。

标签： javascript

解决方案

modal是元素的集合（即使它只包含一个元素）。要么使用

var modal = document.querySelector("#myModal");

或使用古老的

var modal = document.getElementById('myModal');

只找到一个元素或访问集合的第一个元素

modal[0]

推荐阅读