javascript - 未捕获的类型错误 : Cannot set property 'onclick' of null

Question

我在使用一个简单的复选框弹出窗口警报时遇到问题，而且我一生都无法弄清楚原因。以下是基本的 Javascript 和 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>

抛出:Uncaught TypeError: Cannot set property 'onclick' of null 下

blue_box.onclick=colorFunction;

我的代码中是否有任何明显的原因导致此错误？

Answer 1

将代码包装在

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