50

I'm having problems making my window alert pop up with a simple checkbox and can't for the life of me figure out why. Here's the basic Javascript and HTML:

var blue_box=document.getElementById("color-blue");
function colorFunction() {
    window.alert("This color is blue!");
}

blue_box.onclick=colorFunction;
<form action="" method="POST" id="form">
    <fieldset>
        <legend> Form!</legend>
        <ul>
            <li><label><input type="checkbox" 
                    name="color" 
                    value="blue" 
                    id="color-blue" />
                    blue</label>
                </li>
         <li><label><input type="checkbox" 
                    name="color"  
                    value="red" 
                    id="color-red" />
                    red</label>
                </li>
  <li><label><input type="checkbox" 
                    name="color" 
                    value="yellow" 
                    id="color-yellow" />
                    yellow </label>
                </li>
            </ul>
        </fieldset>
    </form>

Which throws: Uncaught TypeError: Cannot set property 'onclick' of null under 

blue_box.onclick=colorFunction;

Are there any visible reasons for this error in my code?

Christian Sirolli
  • 246
  • 1
  • 6
  • 18
user1279662
  • 501
  • 1
  • 4
  • 5
  • 2
    Did you put the script tag at the _end_ of the body element? (before the

    )

     – Stardust Dec 31 '15 at 17:02
  • at the time you are calling the blue_box, the checkbox has not been physically created, hence null. when you wrap it on window.onload it waits for the entire global object to load before it is executed. similarly if you add the script at the bottom, it will let the element be created before trying to execute. – DocJ457 Apr 05 '20 at 08:41
  • use colorFunction() instead of colorFunction – Gulshan Yadav Oct 02 '20 at 15:40

6 Answers6

117

Wrap code in

window.onload = function(){ 
    // your code 
};
maximkou
  • 5,252
  • 1
  • 20
  • 41
  • 1
    This works! Why though? – Vladimir Markiev Apr 22 '21 at 09:27
  • 1
    @VladimirMarkiev The script basically is executed right when the window's onload listener is invoked. Which means the code would execute after everything on the page is loaded, hence nothing remains null. – Sanved Aug 28 '21 at 02:24
28

Try to put all your <script ...></script> tags before the </body> tag. Perhaps the js is trying to access an object of the DOM before it's built up.

Tafadzwa Gonera
  • 352
  • 6
  • 20
9

So I was having a similar issue and I managed to solve it by putting the script tag with my JS file after the closing body tag.

I assume it's because it makes sure there's something to reference, but I am not entirely sure.

PaintHat
  • 113
  • 1
  • 4
6

Make sure your javascript is being executed after your element(s) have loaded, perhaps try putting the js file call just before the tag or use the defer attribute in your script, like so: <script src="app.js" defer></script> this makes sure that your script will be executed after the dom has loaded.

Beto
  • 772
  • 2
  • 12
  • 26
4

"blue_box" is null -- are you positive whatever it is with "id='blue'" exists when this is being run?

try console.log(document.getElementById("blue")) in chrome or FF with firebug. Your script might be running before the 'blue' element is loaded. In this case, you'll need to add the event after the page has loaded (window.onload).

Calamar
  • 1,547
  • 1
  • 13
  • 25
Collin Green
  • 2,146
  • 14
  • 12
1

Does document.getElementById("blue") exist? if it doesn't then blue_box will be equal to null. you can't set a onclick on something that's null

ncremins
  • 9,140
  • 2
  • 25
  • 24