Uncaught TypeError: Impossibile impostare la proprietà 'onclick' di null

Question

Ho problemi a far apparire la finestra di avviso con una semplice casella di controllo e non riesco a capire perché. ci Uncaught TypeError: Cannot set property 'onclick' of null sotto

blue_box.onclick=colorFunction; 

sono motivi evidenti di questo errore nel mio codice: Ecco il Javascript di base e 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> 
 
\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>

che getta?

Answer 1

Document.getElementById ("blu") esiste? se non lo fa, blue_box sarà uguale a null. non puoi impostare un onclick su qualcosa che è nullo

Answer 2

"blue_box" è nullo - sei positivo qualunque cosa sia con "id='blue'" esistente quando viene eseguito?

provare console.log(document.getElementById("blue")) in cromo o FF con firebug. Lo script potrebbe essere in esecuzione prima che l'elemento 'blue' sia caricato. In questo caso, dovrai aggiungere l'evento dopo che la pagina è stata caricata (window.onload).

Answer 3

Prova a inserire tutti i tag <script ...></script> prima del tag </body>. Forse il js sta provando ad accedere ad un oggetto del DOM prima che sia costruito.

Answer 4

codice Wrap in

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

Answer 5

Assicurarsi che il javascript è in esecuzione dopo il vostro elemento (s) hanno caricato, forse prova a mettere la chiamata di file js appena prima del tag o utilizzare l'attributo di rinviare nello script, così: <script src="app.js" defer></script> questo fa in modo che lo script venga eseguito dopo il caricamento della dom.

Answer 6

Così stavo avendo un problema simile e sono riuscito a risolverlo inserendo il tag script con il mio file JS dopo il tag body di chiusura.

Suppongo che sia perché ci si assicura che ci sia qualcosa a cui fare riferimento, ma non ne sono del tutto sicuro.