js代码Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)问题解决

最新推荐文章于 2024-05-31 17:40:50 发布

nanke_yh

最新推荐文章于 2024-05-31 17:40:50 发布

阅读量3.3w

点赞数 7

分类专栏： js 文章标签： js html innerHTML

本文链接：https://blog.csdn.net/nanke_yh/article/details/123778950

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在编写一个html时，想要实现js中处理的数据输出并显示在浏览器的表格中，然后再写完代码后，报错Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')；

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

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

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			font-size: 14px;
			width: 200px;
			height: auto;
			margin: 50px auto; 
		}
		table{
			text-align: center;
			border-collapse:collapse;
		}
		table,tr,td,th{
			border: 1px solid #ccc;
		}
		#t1 tr:nth-child(even){
			color:red;
		}
		th{
			font-weight: bold;
		}
	</style>
<!--   将这部分放在body之后解决问题  -->
<!-- 	<script type="text/javascript">
		var stuNum = 7;
		var stuSoc = new Array();
		var sum = 0;
		var std = 0;
		var notPassNum = 0;
		for (var i = 0; i < stuNum; i++) {
			stuSoc[i] = prompt("请输入7个学生中第"+(i+1)+"个学生成绩分数：");
			sum += parseInt(stuSoc[i]);
			if (stuSoc[i] < 60) {
				notPassNum++;
			}
		}
		std = parseFloat(sum/stuNum).toFixed(3);
		alert("总分："+sum+","+"平均成绩："+std+","+"不及格人数："+notPassNum);
		
		for (var i = 0; i < stuNum; i++) {
			document.getElementById(i).innerHTML = stuSoc[i];
		}
		document.getElementById("sum").innerHTML = sum;		
		document.getElementById("std").innerHTML = std;
		document.getElementById("notPassNum").innerHTML = notPassNum;
	</script> -->
</head>
<body>
	<div id = "content">
		<table id = "t1">
			<tr>
				<th>序号</th>
				<th>分数</th>
			</tr>
			<tr>
				<td>1</td>
				<td id = "0"></td>
			</tr>
			<tr>
				<td>2</td>
				<td id = "1"></td>
			</tr>
			<tr>
				<td>3</td>
				<td id = "2"></td>
			</tr>
			<tr>
				<td>4</td>
				<td id = "3"></td>
			</tr>
			<tr>
				<td>5</td>
				<td id = "4"></td>
			</tr>
			<tr>
				<td>6</td>
				<td id = "5"></td>
			</tr>
			<tr>
				<td>7</td>
				<td id = "6"></td>
			</tr>
		</table>
	</div>
	
	<hr>
	
	<div id ="result" >
		<table id = "t2">
			<tr>
				<th>统计项</th>
				<th>数值</th>
			</tr>
			<tr>
				<td>总分</td>
				<td id = "sum"></td>
			</tr>
			<tr>
				<td>平均成绩</td>
				<td id = "std"></td>
			</tr>
			<tr>
				<td>不及格人数</td>
				<td id = "notPassNum"></td>
			</tr>
		</table>
	</div>
    <script type="text/javascript">
		var stuNum = 7;
		var stuSoc = new Array();
		var sum = 0;
		var std = 0;
		var notPassNum = 0;
		for (var i = 0; i < stuNum; i++) {
			stuSoc[i] = prompt("请输入7个学生中第"+(i+1)+"个学生成绩分数：");
			sum += parseInt(stuSoc[i]);
			if (stuSoc[i] < 60) {
				notPassNum++;
			}
		}
		std = parseFloat(sum/stuNum).toFixed(3);
		alert("总分："+sum+","+"平均成绩："+std+","+"不及格人数："+notPassNum);
		
		for (var i = 0; i < stuNum; i++) {
			document.getElementById(i).innerHTML = stuSoc[i];
		}
		document.getElementById("sum").innerHTML = sum;		
		document.getElementById("std").innerHTML = std;
		document.getElementById("notPassNum").innerHTML = notPassNum;
	</script>
</body>
</html>

结果：

nanke_yh

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
js代码Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)问题解决

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')问题解决：将DOM的读取部分的script部分(js代码段)放在body后面。或者在script标签中添加window.onload，等页面加载结束后再执行这一部分代码。
复制链接

扫一扫