如果把js內容直接放在這個head標簽以內，button按鈕不能正常點擊更換body的背景顏色，報錯提示：demo6.html:16 Uncaught TypeError: Cannot set property 'onclick' of null，分析解決辦法如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>點擊背景變色js事件問題</title> 7 <style type="text/css"> 8 button{ 9 cursor: pointer; 10 } 11 </style> 12 <script> 13 // 問題描述,如果直接把這下面段代碼放在頁面這里，控制台提示Uncaught TypeError: Cannot set property 'onclick' of null 14 15 obj=document.getElementById('dj'); 16 obj.onclick=function(){ 17 document.body.style.background='#f90'; 18 } 19 20 // 解決辦法二: 21 // window.onload = function () { 22 // var Btn = document.getElementById('dj'); 23 // Btn.onclick = function () { 24 // console.log("push the button "); 25 // document.body.style.background='#f90'; 26 // } 27 // } 28 </script> 29 <body> 30 <button id="dj">點擊</button> 31 </body> 32 <!-- <script type="text/javasript"> --> 33 <!-- 相關問題：<script></script> vs/or <script type=”text/javasript”></script> 34 如果用H5就不需要加，因為H5默認屬性就是text/javascript， 35 而 HTML 4.01 and XHTML 1.0 規范 type 屬性是需要的，如果用H5<script></script>是可以且比較好的選擇。最重要一點是加了不起作用也不報錯 --> 36 37 <!-- 解決辦法一： --> 38 <!-- <script> 39 obj=document.getElementById('dj'); 40 obj.onclick=function(){ 41 console.log('測試'); 42 alert('Surprise') 43 document.body.style.background='#f90'; 44 } 45 </script> --> 46 </html>
問題歸納總結：第一種解決辦法直接js文件放在頁面底部加載，第二種window onload()包裹起來，出現問題原因：W3School中介紹瀏覽器先加載完按鈕節點才執行JS，當瀏覽器自頂向下解析時，找不到onclick綁定的按鈕節點了,網頁中的javaScript腳本代碼往往需要在文檔加載完成后才能夠去執行，否則可能導致無法獲取對象的情況,。window.onload是一個事件，window.onload表示頁面加載完成后執行的函數，js按照頁面自上而下的順序說明的，頁面上的Javascript代碼是HTML文檔的一部分，所以Javascript在頁面裝載時執行的順序就是其引入標記!
補充(2020-10-27)針對評論中說文件解決方法不起作用，可以下載文件進行查看https://files-cdn.cnblogs.com/files/webaction/UncaughtTypeError.zip