Eventlistener "щелкнуть" и показать текст в console.log не работает

Question

я пытаюсь показать текст в console.log при нажатии на изображение в html.Теперь я получаю эту ошибку в консоли в браузере: TypeError: Невозможно прочитать свойство 'addEventListener' из null.

JS:

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


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

button.addEventListener("click", appear);

HTML:

<article id="button">

Answer 1

В идеале у вас должна быть кнопка внутри вашей статьи , к которой будет применяться ваше событие клика, например:

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

Ваш Javascript правильный,но только до тех пор, пока document.getElementById ("button") успешно находит элемент с идентификатором "button".

Когда вы открываете консоль браузера, вы должны увидеть "hello"при нажатии на кнопку.

Answer 2

Это потому, что getElementById ничего не может вернуть.Вы должны добавить проверку, что она возвращает ссылку на кнопку:

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