JS事件报错之Cannot set property 'onclick' of null 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //根据id属性的值从文档中获取这个元素
            var btnObj=document.getElementById("btn");
            //为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数    (匿名函数)
            btnObj.onclick=function(){
                //响应做的事情
                alert("jaja");
            };
        </script>
    </head>
    <body>
        <input type="button" value="显示效果" id="btn" />    
    </body>
</html>

上面代码执行后，显示

进行更改，需要把js文件放在底部加载：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>    
    </head>
    <body>
        <input type="button" value="显示效果" id="btn" />    
        <script>
            //根据id属性的值从文档中获取这个元素
            var btnObj=document.getElementById("btn");
            //为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数    (匿名函数)
            btnObj.onclick=function(){
                //响应做的事情
                alert("jaja");
            };
        </script>
    </body>
</html>

代码正常执行

原因：当js文件放在head里面时，如果绑定了onclick或者onmouseover事件，就会出现如上图类似的错误，是因为浏览器的加载你写的html文档的顺序是从上往下，加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。

解决办法：第一，把js文件放在底部加载；第二，使用window.onload=function(){}包裹js内容。

 

posted @ 2019-08-13 10:52  鱼七姑娘  阅读(12058)  评论(0)    收藏  举报