关于js报错Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)

最新推荐文章于 2024-06-24 16:30:50 发布

山魔 •

最新推荐文章于 2024-06-24 16:30:50 发布

阅读量8.3w

点赞数 48

文章标签：前端经验分享

本文链接：https://blog.csdn.net/qq_53567373/article/details/120605072

版权

很多同学在写js代码的时候都遇到过这样的问题：

Cannot set properties of null (setting 'innerHTML')，这个报错的意思是无法读取null的属性“innerHTML”，即表示找不到你想要将所写的HTML代码插入的地方。

解决办法：将DOM的读取部分的script放在body后面。或者在script标签中添加window.onload，等页面加载结束后再执行这一部分代码。

原因：浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树，代码的执行顺序是自上而下依次执行，当执行到innerHTML这一行代码时，他并没有加载到下面的DOM结构，就会报错无法读取HTML。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function showTime() {
            var today = new Date;
            var year = today.getFullYear();
            var month = checkNum(today.getMonth() + 1);
            var data = checkNum(today.getDate());
            var hour = today.getHours();
            var minute = checkNum(today.getMinutes());
            var second = checkNum(today.getSeconds());
            var day = today.getDay();
            var a = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var tip = '上午'
            if (hour > 12) {
                hour -= 12;
                tip = '下午'
            }
            var time = year + '年' + month + '月' + data + '日' + ' ' + tip + ' ' + hour + ':' + minute + ':' +
                second + ' ' + a[day];
            document.getElementById('time').innerHTML = time;//报错，无法读取内部HTML。
        }

        function checkNum(num) {
            if (num < 10) {
                return '0' + num;
            }
            return num;
        }
        setInterval(showTime, 1000);
    </script>
</head>

<body>
    <div id="time"> </div> //此时的div并没有被加载。
</body>
</html>

解决：将 setInterval(showTime, 1000);这一行代码放到body之后：

<body>
    <div id="time"> </div>
</body>
<script>
    setInterval(showTime, 1000);
</script>
</html>

或在原本的script标签中添加window.onload

        window.onload = function () {
            setInterval(showTime, 1000);
        }
    </script>

这样就可以完美解决啦！

山魔 •

关注

48
点赞
踩
34

收藏

觉得还不错? 一键收藏
4
评论
关于js报错Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)

很多同学在写js代码的时候都遇到过这样的问题：Cannot set properties of null (setting 'innerHTML')，这个报错的意思是无法读取null的属性“innerHTML”，即表示找不到你想要将所写的HTML代码插入的地方。解决办法：将DOM的读取部分的script放在body后面。或者在script标签中添加window.onload，等页面加载结束后再执行这一部分代码。原因：浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树，代.
复制链接

扫一扫