关于javascript：未捕获TypeError：无法设置null的属性’onclick’

Uncaught TypeError: Cannot set property 'onclick' of null

本问题已经有最佳答案，请猛点这里访问。

我在使用简单的复选框弹出我的窗口警报时出现问题，并且不能为我的生活找出原因。这是基本的Javascript和HTML：

1
2
3
4
5
6

var blue_box=document.getElementById("color-blue");
function colorFunction() {
window.alert("This color is blue!");
}

blue_box.onclick=colorFunction;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<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
下

1	blue_box.onclick=colorFunction;

我的代码中是否有任何可见的错误原因？