Uncaught TypeError: Cannot set property ‘onclick’ of null解决办法

发布于 作者:

如果把js内容直接放在这个head标签以内，button按钮不能正常点击更换body的背景颜色，报错提示：demo6.html:16 Uncaught TypeError: Cannot set property ‘onclick’ of null，分析解决办法如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击背景变色js事件问题</title>
    <style type="text/css">
        button{
            cursor: pointer;
        }
    </style>
    <script>
    // 问题描述,如果直接把这下面段代码放在页面这里，控制台提示Uncaught TypeError: Cannot set property 'onclick' of null

    obj=document.getElementById('dj');
    obj.onclick=function(){
        document.body.style.background='#f90';
    }

    // 解决办法二:
        // window.onload = function () {
        //     var Btn = document.getElementById('dj');
        //     Btn.onclick = function () {
        //         console.log("push the button ");
        //         document.body.style.background='#f90';
        //     }
        // }
    </script>
<body>
    <button id="dj">点击</button>
</body>
<!-- <script type="text/javasript"> -->
    <!-- 相关问题：<script></script> vs/or <script type=”text/javasript”></script>
    如果用H5就不需要加，因为H5默认属性就是text/javascript，
而 HTML 4.01 and XHTML 1.0 规范 type 属性是需要的，如果用H5<script></script>是可以且比较好的选择。最重要一点是加了不起作用也不报错 -->

<!-- 解决办法一： -->
<!-- <script>
    obj=document.getElementById('dj');
    obj.onclick=function(){
        console.log('测试');
        alert('Surprise')
        document.body.style.background='#f90';
    }
</script> -->
</html>

问题归纳总结：第一种解决办法直接js文件放在页面底部加载，第二种window onload()包裹起来，出现问题原因：W3School中介绍浏览器先加载完按钮节点才执行JS，当浏览器自顶向下解析时，找不到onclick绑定的按钮节点了,网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况,。window.onload是一个事件，window.onload表示页面加载完成后执行的函数，js按照页面自上而下的顺序说明的，页面上的Javascript代码是HTML文档的一部分，所以Javascript在页面装载时执行的顺序就是其引入标记!