TypeError no capturado: No se puede establecer la propiedad 'onclick' de nulo

Question

Tengo problemas para hacer que mi alerta de ventana aparezca con una simple casilla de verificación y no puedo entender por qué. no Uncaught TypeError: Cannot set property 'onclick' of null bajo

blue_box.onclick=colorFunction; 

¿Se hacen visibles razones de este error en mi código: aquí está el Javascript y HTML básico:

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> 
 
\t   <li><label><input type="checkbox" 
 
        name="color" 
 
        value="red" 
 
        id="color-red" /> 
 
        red</label> 
 
       </li> 
 
\t \t <li><label><input type="checkbox" 
 
        name="color" 
 
        value="yellow" 
 
        id="color-yellow" /> 
 
        yellow </label> 
 
       </li> 
 
      </ul> 
 
     </fieldset> 
 
    </form>

que arroja?

Answer 1

¿Existe document.getElementById ("azul")? si no lo hace, blue_box será igual a null. no puede establecer un onclick en algo que es nulo

Answer 2

"blue_box" es nulo - ¿Está seguro de lo que sea que haya "id='blue'" cuando se está ejecutando?

prueba console.log(document.getElementById("blue")) en cromo o FF con firebug. Su script podría estar ejecutándose antes de que se cargue el elemento 'blue'. En este caso, deberá agregar el evento una vez que la página se haya cargado (window.onload).

Answer 3

Trate de poner todas sus etiquetas <script ...></script> antes de la etiqueta </body>. Quizás el js intente acceder a un objeto del DOM antes de que se haya creado.

Answer 4

código Wrap en

window.onload = function(){ 
    // your code 
}; 

Answer 5

Asegúrese de que su Javascript está siendo ejecutado después de su elemento (s) han cargado, tal vez trate de poner la llamada js antes de la etiqueta o utilizar el atributo diferir en la secuencia de comandos, así: <script src="app.js" defer></script> esto asegura que su script se ejecutará después de que el dom se haya cargado.

Answer 6

Así que estaba teniendo un problema similar y logré resolverlo colocando la etiqueta del script con mi archivo JS después de la etiqueta de cierre del cuerpo.

Supongo que es porque se asegura de que haya algo para hacer referencia, pero no estoy del todo seguro.