未捕獲的類型錯誤：無法設置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'

回答

相關問題