Question

我想在单击图像时发出警报。我正在尝试通过ID选择元素。我已经尝试了querySelector和getElementbyId。如果将事件侦听器设置为页面加载，则在重新加载时会发出警报。因此我确定我可以正确链接页面，但是当我尝试收听图片点击时，我做错了事。

我尝试了querySelector和getElementbyId。我已将该脚本放在文件头和其自己的文件中。我已将id放在图像标签上以及图像的span和div中。

document.addEventListener("DOMContentLoaded", function(event) {
  alert("RELOAD");
});

let thumbnailElement = document.getElementById("smart_thumbnail");

thumbnailElement.addEventListener("click",     function() {
  alert("I saw you click!");
});

<div id="smart_thumbnail">
  <img src="https://images.unsplash.com/photo-1454789548928-9efd52dc4031?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="earth" class="small">
</div>

浏览器中控制台的错误是：

TypeError：document.querySelector（...）为空

Answer 1

在访问DOM元素的值之前，必须确保该元素已经存在。

如果脚本在html加载之前运行，则可以通过等待窗口先完成加载来使其运行：

document.addEventListener("DOMContentLoaded", function(event) {
   alert("RELOAD");
   let thumbnailElement = document.getElementById("smart_thumbnail");

   thumbnailElement.addEventListener("click", function() {
      alert("I saw you click!");
   });
});

警报和听点击事件麻烦

1 个答案: