在javascript中，我正在使用EventListener，并且我得到了TypeError xyz = null

in javascript I'm using EventListener and I get the TypeError xyz = null

本文关键字：null TypeError xyz EventListener javascript      更新时间：2023-09-26

//这是我正在使用的代码。在控制台中，我收到错误类型错误xyz = null，请帮助我找出我做错了什么。

<script>
var xyz = document.getElementById("myBtn");
xyz.addEventListener("mouseover", hoverExample1);
xyz.addEventListener("mouseout", hoverExample2);
function hoverExample1() {
    document.body.style.backgroundColor = "blue";}
function hoverExample2() {
    document.body.style.backgroundColor = "red";}
</script>
<body>
<button type="button" id="myBtn">Hover Experiment 1</button>
</body>

将<script>作为<body>的last-child，而不是将其放在<head>中。当您访问myBtn时，它不在DOM 

var xyz = document.getElementById("myBtn");
xyz.addEventListener("mouseover", hoverExample1);
xyz.addEventListener("mouseout", hoverExample2);
function hoverExample1() {
  document.body.style.backgroundColor = "blue";
}
function hoverExample2() {
  document.body.style.backgroundColor = "red";
}
<button type="button" id="myBtn">Hover Experiment 1</button>

这个js脚本甚至在DOM准备好之前就被执行了，此时#myBtn不可用。如前面的回答所述，您可以将脚本放在标签body末尾，或者您可以制作代码片段以在window.onload同时仍然将JS放在HTML部分之前

window.onload = _attachEvent; // a function to wrap all js code 
                                 and it will be called onload
function _attachEvent(){
var xyz = document.getElementById("myBtn");
xyz.addEventListener("mouseover", hoverExample1);
xyz.addEventListener("mouseout", hoverExample2);
function hoverExample1() {
   document.body.style.backgroundColor = "blue";
   }
function hoverExample2() {
   document.body.style.backgroundColor = "red";
   }
}

您还可以探索 DOMContentLoaded，它也可用于解决此类问题。

工作小提琴

相关文章：