如果把js內容直接放在這個head標簽以內，button按鈕不能正常點擊更換body的背景顏色，報錯提示：demo6.html:16 Uncaught TypeError: Cannot set property 'onclick' of null，解決代碼展示，問題歸納總結：第一種解決辦法直接js... ...
如果把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在頁面裝載時執行的順序就是其引入標記!
