Uncaught TypeError: Cannot set property 'onclick' of null

Uncaught TypeError: Cannot set property 'onclick' of null

未捕获的TypeError:无法将属性“onclick”设置为null

问题分析：当JS文件放在head标签里中时，并且绑定了onclick事件，就出现了这个错误

原因：W3School中介绍浏览器先加载完按钮节点才执行JS，当浏览器自顶向下解析时，找不到onclick绑定的按钮节点了

报错代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>111</title>
        <script type="text/javascript">
            var add = document.getElementById("a");
            add.onclick = function(){
                alert("呵呵你个呵呵！！！");
            }
        </script>
    </head>
    <body>
        <a href="javascript:;" id="a">点我</a>
    </body>
</html>

解决方案一：把JS内容用window.οnlοad=function(){ }包裹起来

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>111</title>
        <script type="text/javascript">
            window.onload = function(){
                var add = document.getElementById("a");
                add.onclick = function(){
                    alert("呵呵你个呵呵！！！");
                }
            }
        </script>
    </head>
    <body>
        <a href="javascript:;" id="a">点我</a>
    </body>
</html>

解决方法二：将JS文件放在底部加载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>111</title>
    </head>
    <body>
        <a href="javascript:;" id="a">点我</a>
        <script type="text/javascript">
            var add = document.getElementById("a");
            add.onclick = function(){
                alert("呵呵你个呵呵！！！");
            }
        </script>
    </body>
</html>

参考：https://blog.csdn.net/wls666/article/details/89281458

posted @ 2021-08-12 16:17  贪玩的阿柒  阅读(297)  评论(0)    收藏  举报