Question

好吧，好吧，我无法弄清楚为什么我的JavaScript的按钮仍然为null。页面加载后，我立即收到此错误消息： main.js：163未捕获的TypeError：无法读取null的属性'addEventListener'。这是我的代码：

var h1 = document.querySelector("h1");
var isPurple = false;
var button = document.querySelector(".button");
button.addEventListener("click", function() {
  if (isPurple) {
    document.body.style.backgroundColor = "white";
    isPurple = false;
  } else {
    isPurple = true;
    document.body.style.backgroundColor = "purple";
  }
});

<h1>Hello!</h1>
<h1>header</h1>
<ul>
  <li class="first">list1</li>
  <li class="notFirst">list2</li>
  <li class="notFirst">list3</li>
</ul>
<button class="button">Click me!</button>

希望您能帮助我。谢谢，克里斯托夫。

Answer 1

将<script type="text/javascript" src="main.js"></script>放在body标签的底部;）

Answer 2

您的JavaScript在DOM之前加载

我不知道为什么我的JavaScript的按钮仍然为空

2 个答案: