未捕获的TypeError:无法设置null的属性'onclick'

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 
};

Answer 2

尝试将所有<script ...></script>标记放在标记之前</body>.也许js在构建之前尝试访问DOM的对象.

Answer 3

确保您的 javascript 在元素加载后执行，也许尝试将 js 文件调用放在标记之前或在脚本中使用 defer 属性，如下所示：<script src="app.js" defer></script>这确保您的脚本将在dom 已加载。

Answer 4

所以我遇到了类似的问题，我设法通过将脚本标签和我的JS文件放在结束body标签之后解决了这个问题。

我认为这是因为它确保有一些要参考的东西，但是我不确定。

Answer 5

document.getElementById("blue") 是否存在？如果不是，则 blue_box 将等于 null。你不能在空的东西上设置 onclick