javascript - 警报和监听点击事件时出现问题

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(...) is null

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!");
   });
});