Uncaught TypeError: impossible de définir la propriété "onclick" de null [duplicate]

cette question a déjà une réponse ici:

• pourquoi jQuery ou une méthode DOM telle que getElementById ne trouve-t-elle pas l'élément? 6 réponses

j'ai des problèmes à faire apparaître mon alerte fenêtre avec une simple case à cocher et je ne peux pas pour la vie de moi comprendre pourquoi. Voici l' 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>

qui lance: Uncaught TypeError: Cannot set property 'onclick' of null en vertu de l'

blue_box.onclick=colorFunction;

y a-t-il des raisons visibles pour cette erreur dans mon code?