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

最新推荐文章于 2025-03-07 22:44:00 发布

山魔 •

最新推荐文章于 2025-03-07 22:44:00 发布

阅读量9.1w

点赞数 53

文章标签：前端经验分享

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

版权

这篇博客介绍了JavaScript中常见的错误`Cannot set properties of null (setting 'innerHTML')`，解释了该错误发生的原因是尝试在DOM元素尚未加载时访问其属性。解决方案包括将包含`innerHTML`修改的脚本放在`body`标签之后，或者使用`window.onload`确保在页面完全加载后执行相关代码。示例代码展示了如何修正这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多同学在写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>

这样就可以完美解决啦！