Why my onclick event in JavaScript does not work?

Question

I'm new at programming and I am trying different things and today I tried this:

HTML:

<button id="button">Blue button</button>

JavaScript:

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

button.onclick = function() {
  element.style.backgroundColor = "red";
  element.style.color = "white";
  element.innerHTML = "Red Button";
}

And the console says: cannot set property 'onclick' of null

The element that you try to access in your function is not defined anywhere, you need to either use `button.style.backgroundColor ...` instead of `element.style.backgroundColor` or you need to access the clicked element in the on click function. Passing in function a variable to capture the event `= function(e)` and then access the element `e.target.style.backgroundColor` — RDU, Jun 15 '21 at 13:51

score 0 · Accepted Answer · answered Jun 15 '21 at 13:42

The element probably hasn't been loaded when you tried selecting it. Add an event listener for DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function() {
  let button = document.getElementById("button");

  button.onclick = function() {
    button.style.backgroundColor = "red";
    button.style.color = "white";
    button.innerHTML = "Red Button";
  }
})

<button id="button">Blue button</button>

Why my onclick event in JavaScript does not work?

1 Answers1