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节点，从而导致无法对dom节点进行相关的操作，即无法设置相关dom节点的属性。

我下面用代码示例一下。

<!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节点，从而导致无法对dom节点进行相关的操作，即无法设置相关dom节点的属性。

那又为什么不能获取dom节点呢？我不是写了这个获取相关标签dom节点的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中的代码是编译一行就执行一行，我们已经在前面把 JavaScript这个代码已经使用完了，到后面执行html代码后，就没有这个javascipt代码了，所以就没有实现那个我们想要的javascipt代码的效果，。

解决办法:

思路一，既然是因为body标签后面没有javascipt代码，才导致的执行相关的操作，那就把相应的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() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

window.onload() 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。

使用window.onload()这个方法，就不用考虑javascript代码的位置了，因为使用window.onload()，只要网页加载完，就会触发相应的效果，例如，

<!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 之在数据加载完成后才自动执行函数

进入页就执行，不论等数据是否加载完成：

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

数据加载完成执行：

$(document).ready(function(){ ... })
这个还可以简写成
$(function(){ ... });

出现这样的问题，说明dom结构加载慢，大家可以将代码封装到jquery的加载完成再执行即可，就不会出现这样的错误了

到此这篇关于js Cannot set properties of null(setting ‘onclick‘)问题分析的文章就介绍到这了,更多相关js Cannot set properties of null内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript实现类似拉勾网的鼠标移入移出效果
其实也是个偶然的机会让我想去研究一下这个效果。主要是由于有个群里的人发了个讲解这个效果的链接，当时也没怎么在意，然后过两天，突然就想起这件事，便去拉勾网一看，效果不错啊，所以就自己研究起来，现在将过程分享给大家，有需要的可以参考借鉴。
2016-10-10
JavaScript 作用域实例分析
这篇文章主要介绍了JavaScript 作用域,结合实例形式分析了JavaScript函数作用域相关概念、原理及操作注意事项,需要的朋友可以参考下
2019-10-10
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
自制简易打赏功能的实例
下面小编就为大家带来一篇自制简易打赏功能的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
详解如何使用Flutter动画魔法使UI元素活起来
这篇文章主要为大家介绍了如何使用Flutter动画魔法使UI元素活起来方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
JavaScript实现的原生态Tab标签页功能【兼容IE6】
这篇文章主要介绍了JavaScript实现的原生态Tab标签页功能,可兼容IE6及谷歌等浏览器,涉及javascript事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
2017-09-09
JS跳过debugger的几种方法小结
本文主要介绍了JS跳过debugger的几种方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
微信小程序利用Canvas绘制图片和竖排文字详解
这篇文章主要介绍了微信小程序利用Canvas绘制图片和竖排文字详解，合成图片应该按照 Canvas 的文档来做都没什么问题，主要是有个竖排文字的需求，这里和大家分享一下,需要的朋友可以参考下
2019-06-06
JavaScript中的函数声明和函数表达式区别浅析
这篇文章主要介绍了JavaScript中的函数声明和函数表达式区别浅析,本文总结的浅显易懂,非常好的一篇技术文章,需要的朋友可以参考下
2015-03-03
为你的微信小程序体积瘦身详解
这篇文章主要给大家介绍了关于微信小程序瘦身的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-05-05