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

所以我遇到了类似的问题，我设法通过在关闭正文标记之后将脚本标记与我的JS文件一起解决。

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

Answer 4

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

Answer 5

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

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

Answer 6

document.getElementById（“blue”）是否存在？如果没有，那么blue_box将等于null。你不能设置onclick上的null

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

6 个答案: