模态脚本中的"Uncaught TypeError: Cannot set property 'onclick' of null"

Question

我知道这已经被问了一千次，但我找不到解决我问题的现有帖子，所以我提前道歉。我仍然在学习所有这些，并且一直在这里和那里测试一些东西来练习。尝试为我正在处理的网站中的图像设置模式脚本时，我在标题中遇到了问题。

我尝试在"img.modal"函数之前放置一个"if (img("语句，如另一篇文章中所建议的那样。这样可以清除错误，但不能解决任何问题。

.HTML

<img id="myImg" src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%;max-width:300px" />
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01" src="https://www.w3schools.com/howto/img_snow.jpg" />
<div id="caption">Snow</div>
</div>

爪哇语

var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() { 
modal.style.display = "none";
}

单击缩略图 (myImg( 时，它应该会显示一个包含放大图像 (img01( 的模态。但是当我点击图像时，没有任何反应。如果您需要更多信息，请告诉我。

Answer 1

因为，javascript 无法获取 id = 'myImg' 的元素 因为 html 中没有任何具有该 id 的元素 让 img 将为空

Answer 2

稍微修正一下你的代码。这似乎按照您的预期工作。

单击小图像以打开，单击"x"以关闭。

var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var modal = document.getElementById("myModal")
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() { 
modal.style.display = "none";
}

<img class="modal-content" id="myImg" width="100" src="https://www.w3schools.com/howto/img_snow.jpg" /> 
<div id="myModal" class="modal"> 
<span class="close">&times;</span> 
<img class="modal-content" id="img01" width="200" src="https://www.w3schools.com/howto/img_snow.jpg" /> 
<div id="caption">Snow</div>
</div>