模态脚本中出现“未捕获的类型错误:无法将属性‘onclick’设置为 null”
2019-10-04
529
我知道这个问题已经被问了上千次,但我找不到解决我问题的现有帖子,所以我提前道歉。我仍在学习所有这些,并一直在测试一些东西来练习。当我尝试为我正在工作的网站中的图像设置模态脚本时,我遇到了标题中的问题。
我尝试在“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">×</span>
<img class="modal-content" id="img01" src="https://www.w3schools.com/howto/img_snow.jpg" />
<div id="caption">Snow</div>
</div>
Javascript
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) 的模态。但是当我单击图像时,什么也没有发生。如果您需要更多信息,请告诉我。
2个回答
因为,javascript 无法获取 id = ‘myImg’ 的元素 因为 html 中没有任何具有该 id 的元素 让 img 为 null
Narudon Wannaphanom
2019-10-04
稍微修复一下代码。这似乎按预期工作。
单击小图像打开,单击“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">×</span>
<img class="modal-content" id="img01" width="200" src="https://www.w3schools.com/howto/img_snow.jpg" />
<div id="caption">Snow</div>
</div>
Jackson
2019-10-04