开发者问题收集

模态脚本中出现“未捕获的类型错误:无法将属性‘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">&times;</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">&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>
Jackson
2019-10-04