Question

//这是我正在使用的代码。在控制台中我得到错误TypeError 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>

Answer 1

将<script>放置为last-child <body>，而不是将其放在<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>

Answer 2

即使在DOM准备就绪之前，这个js脚本仍在执行。那时NOTE: I read an HTML code from DB and then upload it into a folder on my host and then view it in ifram tag.不可用。如前面的答案中所述，您可以将脚本放在#myBtn标记的末尾，否则您可以让代码片段在body上执行同时仍然将你的js放在html部分之前

window.onload

您还可以浏览DOMContentLoaded，这也可用于解决此类问题。

Working fiddle

在javascript中我使用EventListener，我得到TypeError xyz = null

2 个答案: