未捕获的类型错误：无法设置 null 的属性“onclick”[重复]答案

【问题标题】：Uncaught TypeError: Cannot set property 'onclick' of null [duplicate]未捕获的类型错误：无法设置 null 的属性“onclick”[重复]
【发布时间】：2012-04-04 10:52:17
【问题描述】：

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

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

【问题讨论】：

你把脚本标签放在body元素的end了吗？（在

标签： javascript events handler

【解决方案1】：

将代码包装在

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

【讨论】：

这行得通！为什么呢？
@VladimirMarkiev 该脚本基本上是在调用窗口的 onload 侦听器时立即执行的。这意味着代码将在页面上的所有内容加载后执行，因此没有任何内容保持为空。

【解决方案2】：

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

【讨论】：

太棒了！这刚刚解决了我自己的一个问题，谢谢！

【解决方案3】：

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

我认为这是因为它确保有一些东西可以参考，但我并不完全确定。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

"blue_box" 为空 -- 你确定它在运行时是否存在 "id='blue'"？

在 chrome 或 FF 中使用 firebug 尝试 console.log(document.getElementById("blue"))。您的脚本可能在 'blue' 元素加载之前运行。在这种情况下，您需要在页面加载后添加事件 (window.onload)。

【讨论】：

【解决方案6】：

document.getElementById("blue") 是否存在？如果不是，那么 blue_box 将等于 null。您不能在无效的内容上设置 onclick

【讨论】：