Uncaught TypeError TypeError: Cannot set properties of null (setting ‘onclick‘)的解决办法

最新推荐文章于 2024-05-05 16:34:59 发布

deadline是第一生产力，

最新推荐文章于 2024-05-05 16:34:59 发布

阅读量6.8k

点赞数 7

分类专栏：前端学习文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_64158899/article/details/128933569

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我下面用代码示例一下。

<!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>

deadline是第一生产力，

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
3
评论
Uncaught TypeError TypeError: Cannot set properties of null (setting ‘onclick‘)的解决办法

Uncaught TypeError TypeError: Cannot set properties of null (setting 'onclick')
复制链接

扫一扫