时间戳

首页 > 解决方案 > 模态脚本中的“未捕获的类型错误：无法设置 null 的属性‘onclick’”

javascript - 模态脚本中的“未捕获的类型错误：无法设置 null 的属性‘onclick’”

问题描述

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

正如另一篇文章中所建议的那样，我尝试在“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) 的模式。但是当我点击图像时，什么也没有发生。如果您需要更多信息，请告诉我。

标签： javascripthtmlcssmodal-dialog

解决方案

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

推荐阅读