Javascript 未捕获类型错误：无法设置属性'；onclick'；空的

我在用一个简单的复选框弹出窗口警报时遇到了问题，我一辈子都不知道为什么。以下是基本的Javascript和HTML：

var blue_box=document.getElementById（“蓝色”）；
函数colorFunction（）{
window.alert（“此颜色为蓝色！”）；
}
blue_box.onclick=colorFunction

形态！


蓝色


红色


黄色的


document.getElementById（“蓝色”）是否存在？如果没有，则blue_box将等于null。您不能在空的内容上设置onclick
“blue\u box”
为空--运行此操作时，您是否确定“id='blue'

是否存在

---

在chrome或firebug的FF中尝试

console.log（document.getElementById（“蓝色”））

。您的脚本可能在加载

'blue'

元素之前运行。在这种情况下，您需要在页面加载后添加事件（

window.onload

）。

尝试将所有的

标记放在

标记之前。也许js正在试图在DOM对象建立之前访问它。

将代码包装进去

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

---

确保在加载元素后执行javascript，或者尝试将js文件调用放在标记之前，或者在脚本中使用defer属性，类似这样：

这可以确保在加载dom后执行脚本。

因此我遇到了一个类似的问题，我设法解决了这个问题，将脚本标记和我的JS文件放在结束体标记之后

---

我想这是因为它确保有东西可供参考，但我不完全确定。

是否将脚本标记放在body元素的末尾？（在之前）在调用blue_框时，复选框尚未实际创建，因此为空。当您在window.onload上包装它时，它会等待整个全局对象加载，然后再执行。类似地，如果在底部添加脚本，它将允许在尝试执行之前创建元素。请使用colorFunction（）而不是colorFunctionBrilliant！这正好解决了我自己的一个问题，谢谢！这管用！为什么呢？