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