15 Uncaught TypeError: Cannot set properties of null (setting ‘onclick‘)

Mr.Aholic

已于 2022-06-25 11:51:57 修改

阅读量8.9k

点赞数 8

分类专栏：前端三剑客文章标签： javascript 前端开发语言

于 2022-06-07 14:30:45 首次发布

本文链接：https://blog.csdn.net/weixin_43304253/article/details/125164649

版权

前端三剑客专栏收录该内容

50 篇文章 6 订阅

订阅专栏

1、报错的代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css"> </style>

        <script type="text/javascript">

            //获取button对象
            var btn = document.getElementById("btn");

            //为按钮的对应事件绑定处理函数的形式来响应事件，当事件被触发时，对应的函数将会被调用
            btn.onclick = function () {
                alert("触发了点击事件");
            };

            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");
            btn1.onclick = function () {
                document.getElementById("t2").value = document.getElementById("t1").value
            };

            btn2.onclick = function () {
                document.getElementById("t2").value = ""
            }



        </script>

</head>

<body>
    <button id="btn">我是按钮</button>

    <br><br>
    <input id="t1" type="text" value="文本1">
    <input id="t2" type="text">
    <button id="btn1">copy</button>
    <button id="btn2">取消</button>


</body>

</html>

2：报错的原因

文档的加载过程是自上向下加载。使用未命名的变量、会报错

3、解决办法

1、将Javascript代码从<head>标签中放入<body>中
2、如果非要将该段代码放入到head标签中该怎样做？？？

在这里插入图片描述
修改后的代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css"> </style>

        <script type="text/javascript">

        window.onload = function(){

                  //获取button对象
            var btn = document.getElementById("btn");

            //为按钮的对应事件绑定处理函数的形式来响应事件，当事件被触发时，对应的函数将会被调用
            btn.onclick = function () {
                alert("触发了点击事件");
            };

            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");
            btn1.onclick = function () {
                document.getElementById("t2").value = document.getElementById("t1").value
            };

            btn2.onclick = function () {
                document.getElementById("t2").value = ""
            }

        }


        </script>

</head>

<body>
    <button id="btn">我是按钮</button>

    <br><br>
    <input id="t1" type="text" value="文本1">
    <input id="t2" type="text">
    <button id="btn1">copy</button>
    <button id="btn2">取消</button>


</body>

</html>

Mr.Aholic

关注

8
点赞
踩
16

收藏

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

2：报错的原因文档的加载过程是自上向下加载。使用未命名的变量、会报错1、将Javascript代码从标签中放入中2、如果非要将该段代码放入到head标签中该怎样做？？？修改后的代码
复制链接

扫一扫