web-dev-qa-db-fra.com

Uncaught TypeError: impossible de définir la propriété 'onclick' de null

J'ai des problèmes pour faire apparaître ma fenêtre d'alerte avec une simple case à cocher et je ne peux pas comprendre pourquoi. Voici les bases de Javascript et 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>

Qui jette: Uncaught TypeError: Cannot set property 'onclick' of null Sous 

blue_box.onclick=colorFunction;

Existe-t-il des raisons visibles de cette erreur dans mon code?

javascripteventshandler
24
user1279662

Envelopper le code dans

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

Essayez de mettre toutes vos balises <script ...></script> avant la balise </body>. Peut-être que le js tente d'accéder à un objet du DOM avant qu'il ne soit construit.

10
Tifa

J'avais donc un problème similaire et j'ai réussi à le résoudre en plaçant la balise de script avec mon fichier JS après la balise body de fermeture.

Je suppose que c'est parce que cela garantit qu'il y a quelque chose à référencer, mais je ne suis pas tout à fait sûr.

4
PaintHat

Assurez-vous que votre javascript est en cours d'exécution après le chargement de votre ou vos éléments. Essayez peut-être de placer l'appel du fichier js juste avant la balise ou utilisez l'attribut defer dans votre script, comme suit: <script src="app.js" defer></script> sera exécuté après le chargement du dom.

3
Beto

"blue_box" est null - êtes-vous certain que quoi que ce soit avec "id='blue'" existe lorsque cela est en cours d'exécution?

essayez console.log(document.getElementById("blue")) en chrome ou FF avec Firebug. Votre script est peut-être en cours d'exécution avant le chargement de l'élément 'blue'. Dans ce cas, vous devrez ajouter l'événement une fois la page chargée (window.onload).

2
Collin Green

Document.getElementById ("blue") existe-t-il? sinon, blue_box sera égal à null. vous ne pouvez pas définir un onclick sur quelque chose qui est null

0
ncremins