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

我有问题让我的窗口警报弹出一个简单的复选框，不能为我的生活找出原因。这里是基本的Javascript和HTML：未捕获的类型错误：无法设置null的属性'onclick'

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> 
 
\t   <li><label><input type="checkbox" 
 
        name="color" 
 
        value="red" 
 
        id="color-red" /> 
 
        red</label> 
 
       </li> 
 
\t \t <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;

是否有这个错误在我的代码任何可见的原因是什么？

来源

2012-03-19 user1279662

您是否已将脚本标记放置在body元素的_end_处？ <！ - 这里的东西 - > （前） – Stardust 2015-12-31 17:02:44

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

来源

2012-03-19 22:31:45 ncremins

"blue_box"为空 - 你是积极的，无论它与"id='blue'"存在，当这是运行？

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

来源

2012-03-19 22:32:41

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

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

来源

2013-01-22 08:49:32 Tifa

辉煌！这只是解决了我自己的问题，谢谢！ – 2017-09-25 03:18:22

裹代码确保你的JavaScript正在执行的元素（S）已加载后，或许可以尝试在JS文件调用的标记之前或在脚本中使用defer属性，像这样：<script src="app.js" defer></script>这确保您的脚本将在dom加载后执行。

来源

2013-05-24 11:54:56 maximkou

来源

2013-08-19 01:05:51 Beto

所以我有一个类似的问题，我设法通过将脚本标记与我的JS文件放在关闭正文标记后解决它。

我认为这是因为它确保有参考，但我不完全确定。

来源

2016-04-05 20:17:45 PaintHat

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

回答

相关问题