很多同学在写js代码的时候都遇到过这样的问题:
Cannot set properties of null (setting 'innerHTML'),这个报错的意思是无法读取null的属性“innerHTML”,即表示找不到你想要将所写的HTML代码插入的地方。
解决办法:将DOM的读取部分的script放在body后面。或者在script标签中添加window.onload,等页面加载结束后再执行这一部分代码。
原因:浏览器加载HTML文档时,会将HTML文档解析为一个树形结构,称为DOM树,代码的执行顺序是自上而下依次执行,当执行到innerHTML这一行代码时,他并没有加载到下面的DOM结构,就会报错无法读取HTML。
示例: Documentfunction 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); //此时的div并没有被加载。解决:将 setInterval(showTime, 1000);这一行代码放到body之后:
setInterval(showTime, 1000);或在原本的script标签中添加window.onload
window.onload = function () {setInterval(showTime, 1000);}这样就可以完美解决啦!