“未捕获的TypeError：无法在模式脚本中设置属性'onclick'为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>

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）的模态。但是，当我单击图像时，什么也没有发生。让我知道是否需要更多信息。

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>