Javascript 如何解决TypeError:document.querySelector（…）为空？_Javascript

Javascript 如何解决TypeError:document.querySelector（…）为空？

javascript

Javascript 如何解决TypeError:document.querySelector（…）为空？,javascript,Javascript,我正试图使用document.querySelector（）以图像为目标，但它给了我一个错误，告诉我TypeError:document.querySelector（…）为null 这是我的密码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Step 1</title> <style> #image1{

我正试图使用document.querySelector（）以图像为目标，但它给了我一个错误，告诉我TypeError:document.querySelector（…）为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>


第一步
#图1{
}
document.querySelector（“#image1”）.addEventListener（“单击”，myFunction）；
//addEventListener（事件、函数、使用捕获）
函数myFunction（）{
警报（“点击警报”）；
}

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

在DOM准备就绪之前，脚本正在运行。您必须使用

DOMContentLoaded

包装代码：


第一步
#图1{
}
addEventListener（“DOMContentLoaded”，函数（事件）{
document.querySelector（“#image1”）.addEventListener（“单击”，myFunction）；
//addEventListener（事件、函数、使用捕获）
函数myFunction（）{
警报（“点击警报”）；
}
});

在DOM准备就绪之前，脚本正在运行。您必须使用

DOMContentLoaded

包装代码：


第一步
#图1{
}
addEventListener（“DOMContentLoaded”，函数（事件）{
document.querySelector（“#image1”）.addEventListener（“单击”，myFunction）；
//addEventListener（事件、函数、使用捕获）
函数myFunction（）{
警报（“点击警报”）；
}
});

为什么在选择元素之前添加事件？DOMContentLoaded到底做什么？@MustafaAnas答案中链接了它。为什么在选择元素之前添加事件？DOMContentLoaded到底做什么？@MustafaAnas答案中有链接。