时间戳

首页 > 解决方案 > 如何解决 TypeError: document.querySelector(...) is null？

javascript - 如何解决 TypeError: document.querySelector(...) is null？

问题描述

我正在尝试使用 document.querySelector() 来定位图像，但它给了我一个错误说 TypeError: document.querySelector(...) is null

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Step 1</title>
    <style>
    #image1{

    }
    </style>
    <script>
     document.querySelector('#image1').addEventListener("click",myFunction);
  // addEventListener(event, function, useCapture)
      function myFunction(){
        alert("alert on click");
      }
    </script>
  </head>
  <body>
    <img src="images/image1.jpg" id="image1" />
  </body>
</html>

标签： javascript

解决方案

DOMContentLoaded

DOMContentLoaded 事件在初始 HTML 文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载。一个非常不同的事件加载应该只用于检测一个完全加载的页面。在 DOMContentLoaded 更合适的地方使用 load 是一个非常常见的错误，所以要小心。

在 DOM 准备好之前，您的脚本正在运行。您必须使用以下代码包装您的代码DOMContentLoaded：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Step 1</title>
    <style>
    #image1{

    }
    </style>
    <script>
      document.addEventListener("DOMContentLoaded", function(event) {     
        document.querySelector('#image1').addEventListener("click",myFunction);
        // addEventListener(event, function, useCapture)
        function myFunction(){
          alert("alert on click");
        }
      });
    </script>
  </head>
  <body>
    <img src="images/image1.jpg" id="image1" />
  </body>
</html>

推荐阅读