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

这篇博客介绍了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>

这样就可以完美解决啦!

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值