Uncaught TypeError: Cannot set property 'onclick' of null解決辦法

時間 2020-02-25

標籤 uncaught typeerror set property onclick null 解決辦法简体版

原文原文鏈接

若是把js內容直接放在這個head標籤之內，button按鈕不能正常點擊更換body的背景顏色，報錯提示：demo6.html:16 Uncaught TypeError: Cannot set property 'onclick' of null，分析解決辦法以下：javascript

 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在頁面裝載時執行的順序就是其引入標記!css

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。