Ошибка cannot set property onclick of null JS

Question

Хотел сделать так, чтобы при нажатии на кнопку текст выводился в консоли, но ничего не происходит из за ошибки:

Uncaught TypeError: Cannot set property 'onclick' of null

Много чего пробовал, но ничего не вышло.

let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
  console.log('How_are_you?');  
};

<button class="theme-button" type="button">Hello, pidr</button>

Answer 1

Такое может происходить если Вы обращаетесь к элементу который еще нет, что бы это решить можно привязаться к event'у DOMContentLoaded, который будет ждать пока DOM не будет построен и только после этого начнет выполнение Вашего скрипта:

window.addEventListener("DOMContentLoaded", event => {
  console.log("DOM fully loaded and parsed")
  const themeButton = document.querySelector(".theme-button")

  const handleClick = () => {
    console.log("How_are_you?")
  }

  themeButton.addEventListener("click", handleClick)
})

<button class="theme-button" type="button">Hello, pidr</button>

БЛОГ НА HUSL

Ошибка cannot set property onclick of null JS

Ответы (1 шт):