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’)”問題，分享下

未捕獲的類型錯誤：無法設置屬性意思就是，無法獲取到dom節(jié)點，從而導致無法對dom節(jié)點進行相關的操作，即無法設置相關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>

報錯原因

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

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

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

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

這就跟我們怎么在 HTML 中引入 JavaScript有關了，

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

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

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

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

解決辦法:

思路一，既然是因為body標簽后面沒有javascipt代碼，才導致的執(zhí)行相關的操作，那就把相應的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() 方法用于在網頁加載完畢后立刻執(zhí)行的操作，即當 HTML 文檔加載完畢后，立刻執(zhí)行某個方法。

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

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

<!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代碼應該寫到最后

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>

運行結果：

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

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

修改后：

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

運行成功！

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

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

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

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

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

出現這樣的問題，說明dom結構加載慢，大家可以將代碼封裝到jquery的加載完成再執(zhí)行即可，就不會出現這樣的錯誤了

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

您可能感興趣的文章: