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

最新推荐文章于 2021-09-06 20:41:09 发布

dinggu6579

最新推荐文章于 2021-09-06 20:41:09 发布

阅读量198

点赞数

原文链接：http://www.cnblogs.com/zhangDY/p/11344502.html

版权

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

代码正常执行

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

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

转载于:https://www.cnblogs.com/zhangDY/p/11344502.html

dinggu6579

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件报错之Cannot set property 'onclick' of null

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> //根据id属性的值从文档中获取这个元素 ...
复制链接

扫一扫