js?Cannot?set?properties?of?null(setting?‘onclick‘)問題分析

更新時間：2025年03月02日 21:59:13 作者：NEXT00

今天增加功能的時候，提示Uncaught?TypeError:?Cannot?set?properties?of?null?(setting?onclick)問題分享下,需要的朋友可以參考下

個人學習過程中遇到“Uncaught TypeError: Cannot set properties of null (setting ‘onclick’)”問題，分享下

未捕獲的類型錯誤：無法設(shè)置屬性意思就是，無法獲取到dom節(jié)點，從而導(dǎo)致無法對dom節(jié)點進行相關(guān)的操作，即無法設(shè)置相關(guān)dom節(jié)點的屬性。

我下面用代碼示例一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript之鼠標事件之按鈕控制改變div盒子的背景顏色</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px red solid;
            background-color: red;
        }
    </style>
    <script>
      var  b=document.getElementById("an");
           b.onclick=function(){
           b.style.background="#ffefa1";
        };
    </script>
</head>
<body>
    <div id="an">可以試一下</div>
</body>
</html>

報錯原因

這個代碼你讀一下，好像可以實現(xiàn)我們想要的效果，實現(xiàn)點擊相關(guān)的div盒子實現(xiàn)其背景顏色變顏色的效果，但是一運行下來，在調(diào)試控制臺里就會出現(xiàn)Uncaught TypeError TypeError: Cannot set properties of null (setting 'onclick')這樣的報錯------未捕獲的類型錯誤：無法設(shè)置屬性

意思就是，無法獲取到dom節(jié)點，從而導(dǎo)致無法對dom節(jié)點進行相關(guān)的操作，即無法設(shè)置相關(guān)dom節(jié)點的屬性。

那又為什么不能獲取dom節(jié)點呢？我不是寫了這個獲取相關(guān)標簽dom節(jié)點的js代碼嗎？

var  b=document.getElementById("an");

這就跟我們怎么在 HTML 中引入 JavaScript有關(guān)了，

那么我們怎么在 HTML 中引入 JavaScript 呢？

引入方式與 CSS 相似，有以下三種方式：

在 HTML 標簽中直接引入，針對一些特別簡短的 JavaScript 代碼。
使用 script 標簽可以將 JavaScript 代碼嵌入到 HTML 文檔的 head 和 body 里。
使用外部 JavaScript 文件，將 JavaScript 腳本代碼寫入一個后綴為 .js 的文件中，通過給 script 標簽設(shè)置 src 屬性的方式，引入這個文件。

我們這個例子的代碼是在head標簽里面引入 JavaScript 代碼，html中的代碼是編譯一行就執(zhí)行一行，我們已經(jīng)在前面把 JavaScript這個代碼已經(jīng)使用完了，到后面執(zhí)行html代碼后，就沒有這個javascipt代碼了，所以就沒有實現(xiàn)那個我們想要的javascipt代碼的效果，。

解決辦法:

思路一，既然是因為body標簽后面沒有javascipt代碼，才導(dǎo)致的執(zhí)行相關(guān)的操作，那就把相應(yīng)的javascipt代碼放在body標簽后面就行了,例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript之鼠標事件之按鈕控制改變div盒子的背景顏色</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px red solid;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="an">可以試一下</div>
</body>
<script>
    var b = document.getElementById("an");
    b.onclick = function () {
        b.style.background = "#ffefa1";
    };
</script>
</html>

思路二，我們可以使用window.onload() 這個方法，

window.onload() 方法用于在網(wǎng)頁加載完畢后立刻執(zhí)行的操作，即當 HTML 文檔加載完畢后，立刻執(zhí)行某個方法。

window.onload() 通常用于 <body> 元素，在頁面完全載入后(包括圖片、css文件等等)執(zhí)行腳本代碼。

使用window.onload()這個方法，就不用考慮javascript代碼的位置了，因為使用window.onload()，只要網(wǎng)頁加載完，就會觸發(fā)相應(yīng)的效果，例如，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript之鼠標事件之按鈕控制改變div盒子的背景顏色</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px red solid;
            background-color: red;
        }
    </style>
    <script>
        window.onload=function(){
      var   b=document.getElementById("an");
        b.onclick=function(){
            b.style.background="#ffefa1";
        };};
    </script>
</head>
<body>
    <div id="an">可以試一下</div>
    <button >點擊</button>
</body>
</html>

一般就是因為獲取不到對象

1、對象名不正確例如 id、class獲取不正確

2、對象不存在，檢查拼寫錯誤

3、是不是js代碼應(yīng)該寫到最后

html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB API學習</title>
</head>
<body>
    <button id="btn">母校</button>
    <script>
        var btn = document.getElementById(" btn ");
        btn.onclick =function(){
            alert('xtu');
        }
    </script>
</body>
</html>

運行結(jié)果：

問題原因：getElementById方法無法找到所寫的id名（空格也被認為是id名的一部分了）
修改前代碼：

var btn = document.getElementById(" btn ");

修改后：

var btn = document.getElementById("btn");

運行成功！

JQuery 之在數(shù)據(jù)加載完成后才自動執(zhí)行函數(shù)

進入頁就執(zhí)行，不論等數(shù)據(jù)是否加載完成：

$(window).load(function(){ ... });　　

數(shù)據(jù)加載完成執(zhí)行：

$(document).ready(function(){ ... })
這個還可以簡寫成
$(function(){ ... });

出現(xiàn)這樣的問題，說明dom結(jié)構(gòu)加載慢，大家可以將代碼封裝到j(luò)query的加載完成再執(zhí)行即可，就不會出現(xiàn)這樣的錯誤了

到此這篇關(guān)于js Cannot set properties of null(setting ‘onclick‘)問題分析的文章就介紹到這了,更多相關(guān)js Cannot set properties of null內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: