zoukankan      html  css  js  c++  java
  • 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内容。

  • 相关阅读:
    python- 冒泡算法
    python-文件读写资料整理
    Python学习之edx6001-week4
    Python学习之自动化开发-DAY1作业-三级菜单
    python学习之自动化开发-DAY1作业-登陆程序
    python 学习之edx6001-week4
    elasticsearch RESTfull _cat api
    python
    python
    python 文件操作
  • 原文地址:https://www.cnblogs.com/zhangDY/p/11344502.html
Copyright © 2011-2022 走看看