Cannot set property 'onclick' of null的問題——呼叫JS檔案出錯的問題
阿新 • • 發佈：2018-12-12
Cannot set property 'onclick' of null的問題
轉載自：https://my.oschina.net/ximidao/blog/351017
今天看了一個W3School JS點選事件的測試案例，詳情頁：http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onclick4，其程式碼為：
<!DOCTYPE html> <html> <head> </head> <body> <p>點選按鈕就可以執行 <em>displayDate()</em> 函式。</p> <button id="myBtn">點選這裡</button> <script> document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>
點選效果正常，而我平時測試程式碼的時候一般習慣把JS程式碼寫在head標籤裡面，上述的程式碼如果將JS程式碼移到head標籤，瀏覽器就會報錯，提示：Uncaught TypeError: Cannot set property 'onclick' of null。
分析了一下程式碼，W3School的寫法是瀏覽器先載入完按鈕節點才執行的JS，因此我將程式碼改為：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> window.onload=function(){ document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate(){ document.getElementById("demo").innerHTML=Date(); } } </script> </head> <body> <p>點選按鈕就可以執行 <em>displayDate()</em> 函式。</p> <button id="myBtn">點選這裡</button> <p id="demo"></p> </body> </html>
測試通過，說明節點需要先載入完才能執行onclick事件。