Uncaught TypeError: Cannot set property 'onclick' of null解決辦法-有解無憂

如果把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 onl oad()包裹起來，出現問題原因：W3School中介紹瀏覽器先加載完按鈕節點才執行JS，當瀏覽器自頂向下決議時，找不到onclick系結的按鈕節點了,網頁中的javaScript腳本代碼往往需要在檔案加載完成后才能夠去執行，否則可能導致無法獲取物件的情況,，window.onload是一個事件，window.onload表示頁面加載完成后執行的函式，js按照頁面自上而下的順序說明的，頁面上的Javascript代碼是HTML檔案的一部分，所以Javascript在頁面裝載時執行的順序就是其引入標記!

參考網址：oito 王大錘子呦 lily2016n

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/147683.html

標籤：JavaScript

上一篇：ES6新特性總結

下一篇：前端網路監控與斷網重鏈