Uncaught TypeError Cannot set property onclick of null

Question

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    x000D   x000D  var blue box document getElementById  color-blue    x000D  function colorFunction     x000D      window alert  This color is blue     x000D    x000D   x000D  blue box onclick colorFunction  x000D   lt form action    method  POST  id  form  gt  x000D       lt fieldset gt  x000D           lt legend gt  Form  lt  legend gt  x000D           lt ul gt  x000D               lt li gt  lt label gt  lt input type  checkbox   x000D                      name  color   x000D                      value  blue   x000D                      id  color-blue    gt  x000D                      blue lt  label gt  x000D                   lt  li gt  x000D            lt li gt  lt label gt  lt input type  checkbox   x000D                      name  color    x000D                      value  red   x000D                      id  color-red    gt  x000D                      red lt  label gt  x000D                   lt  li gt  x000D     lt li gt  lt label gt  lt input type  checkbox   x000D                      name  color   x000D                      value  yellow   x000D                      id  color-yellow    gt  x000D                      yellow  lt  label gt  x000D                   lt  li gt  x000D               lt  ul gt  x000D           lt  fieldset gt  x000D       lt  form gt  x000D   x000D   x000D    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

User · Answer

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   lt script src  app js  defer gt  lt  script gt  this makes sure that your script will be executed after the dom has loaded

User · Answer

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

User · Answer

Wrap code in  window onload   function            your code

User · Answer

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

User · Answer

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

User · Answer

Try to put all your  lt script     gt  lt  script gt  tags before the  lt  body gt  tag  Perhaps the js is trying to access an object of the DOM before it s built up

[javascript] Uncaught TypeError: Cannot set property 'onclick' of null

Examples related to javascript

Examples related to events

Examples related to handler