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>

模态脚本中的“ Uncaught TypeError：无法将属性'onclick'设置为null”

2 个答案: