Eventlistener“单击”并在console.log中显示文本不起作用

Question

im试图在html中单击图像时在console.log中显示文本。现在，我在浏览器的控制台中收到此错误：TypeError：无法读取null的属性'addEventListener'。

JS：

limit

HTML：

function appear() {
    console.log("hello");
}


var button = document.getElementById("button");

button.addEventListener("click", appear);

Answer 1

这是因为getElementById无法返回任何内容。您应该添加一个检查，以确认它返回了对该按钮的引用：

var button = document.getElementById("button");
if (button) {
  button.addEventListener("click", appear);
}

Answer 2

理想情况下，您会在文章中有一个 Button ，将您的点击事件应用于此，

<article>
    <button id="button">Hey</button>
</article>

您的Javascript是正确的，但前提是 document.getElementById（“ button”）成功找到ID为“ button”的元素。

打开浏览器控制台时，单击“按钮”应该会看到“ hello”。