js点击事件的时候浏览器报错,提示Uncaught TypeError: Cannot set property 'onclick' of null的处理

1.js点击事件的时候浏览器报错,提示Uncaught TypeError: Cannot set property 'onclick' of null


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript">

        var btn = document.getElementById('btn')

        btn.onclick = function(){

            alert('我被点了')

        }

    </script>

</head>

<body>

    <button id='btn'>点击事件</button>

</body>

</html>

2.、解决办法

①当把js代码放在head里面的话,点击按钮,报错js.html:8 Uncaught TypeError: Cannot set property ‘onclick’ of null*②放在头部的解决方法把 js代码放在window.οnlοad=function(){…………..}}里面即可解决,window.onload表示页面加载完成后执行的函数,这样JS代码即使放在中也可以完美实现效果。③把js放在点击事件下面也不会报错。

3、原因:js按照页面自上而下的顺序说明的,先加载完按钮节点才执行的JS的点击事件才不会报错

页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记

页面是从上往下加载的,当他执行到事件的时候,会发现没有dom事件,所以会报错。

解决的办法是把事件写在dom元素的下面,或者用window.onload()=>{事件},

因为window.onload是等页面的所有内容都加载完毕之后才会执行。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • html代码 js代码 实现的效果是,点击图片出现模态框然而最终控制台报错Uncaught TypeError: ...
    DecadeHeart阅读 5,228评论 0 1
  • Call 和 Apply 的区别 语法:function.call(thisObj [, arg1[, arg2[...
    他方l阅读 2,507评论 0 0
  • 22、JQ的基础语法、核心原理和项目实战 jQ的版本和下载 jQuery版本 1.x:兼容IE6-8,是目前PC端...
    萌妹撒阅读 5,689评论 0 0
  • 事件流 JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互...
    DHFE阅读 4,258评论 0 3
  • 出处https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: ...
    阿水ovo阅读 1,196评论 0 0