‘ Uncaught TypeError: Cannot set properties of null ‘ 错误解决【Javascript】

吓得我代码都掉了

已于 2022-03-08 08:33:42 修改

阅读量1.7w

点赞数

分类专栏：前端学习文章标签： javascript 前端

于 2022-03-08 08:21:50 首次发布

本文链接：https://blog.csdn.net/weixin_51631278/article/details/123344111

版权

前端学习专栏收录该内容

5 篇文章

订阅专栏

本文详细解释了在JavaScript中遇到的‘UncaughtTypeError: Cannot set properties of null’错误，重点在于代码位置不当导致的变量作用域问题，以及如何通过调整脚本位置来避免此类错误。

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

’ Uncaught TypeError: Cannot set properties of null ’ 错误解决【Javascript】

错误代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		const cars = ["Tesls", "Volvo", "BMW"];
		document.getElementById("demo").innerHTML = cars;
	</script>
	<body>
		<h1>JavaScript 数组</h1>
		<p>Array 对象用于单个变量中存储多个值：</p>
		<p id="demo"></p>
	</body>
</html>

在这里插入图片描述

在这里插入图片描述
根据如图可知：

不能捕捉到类型数据错误。

错误原因
因为 js脚本写在了body前面
网页编译脚本的时候，是从上往下编译，
由于编译脚本的时候body还没编译到，所以读取不到这个变量范围，这时候只要把我们写的js脚本的代码写在body下面就可以了。

正确代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>JavaScript 数组</h1>
		<p>Array 对象用于单个变量中存储多个值：</p>
		<p id="demo"></p>
	</body>
	<script type="text/javascript">
		const cars = ["Tesls", "Volvo", "BMW"];
		document.getElementById("demo").innerHTML = cars;
	</script>
</html>