Why am I getting this error?

Question

The code in question

https://code.sololearn.com/WoF6VRI7VNPP/?ref=app

The commented version on the JS tab DON'T work, but in my opinion it should, why should I declare the variable where I include the element I'm querying inside the function? That was never I thing in my previous codes, why is it now?

Answer 1

Could it be that var bulb = document.querySelector("#bulb") is executing before the DOM is done loading?

Answer 2

SoloProg solution didn't work for me, but Paul K Sadler was right, using:

document.onload = () => {const bulb = document.querySelector("#bulb")};

anywhere in the code (above or below the function, arrow or not arrow) makes it work, thanks guys!

Answer 3

Awesome!

Answer 4

You used radio button. Better to use checkbox. or ordinary button. this way it will be similar to real world. You can switch on or switch off

Answer 5

Paul K Sadler
Nice pick up buddy

Answer 6

// try it

var bulb = document.querySelector("#bulb");

lightOn = () => {
bulb.style.backgroundColor = "yellow";
}