![如何修复JavaScript中的 "uncaught typeerror: cannot set property" 错误](https://static.wbolt.com/wp-content/uploads/2023/11/uncaught-typeerror-cannot-set-property-1024x512-1.jpg "如何修复JavaScript中的 "uncaught typeerror: cannot set property" 错误")
作为一名网络开发人员，在使用 JavaScript 时难免会遇到错误。编码错误会阻止程序完成预期的操作。
为了能够修复这些错误，您需要能够理解错误信息，因为这将有助于您理解错误产生的原因以及如何修复。
在本教程中，我们将讨论 JavaScript 中的 “uncaught typeerror: cannot set property” 错误。
您将了解到该错误发生的原因、可能遇到该错误的不同原因以及修复该错误的不同方法。
“Uncaught TypeError: Cannot set property”在JavaScript中的意思是什么？
typeerror 主要发生在涉及不兼容数据类型的操作中。在我们的案例中，我们遇到了“uncaught typeerror: cannot set property”错误，这是一个 JavaScript 错误，主要发生在您尝试向一个具有 null 值的DOM元素分配属性时。
出现这个错误可能有不同的原因，如：
- 在标记中将
script标签放置在错误的位置。 - 引用DOM元素时出现拼写错误。
- 访问未定义或无效的DOM元素。
在接下来的部分中，我们将讨论上述原因，以及它们如何通过代码示例引发“uncaught typeerror: cannot set property”错误，以及如何修复此错误。
我们还将讨论如何确定变量是 null 还是 undefined 。
如何修复JavaScript中的“uncaught typeerror: cannot set property”错误
在本节中，您将了解到JavaScript中“uncaught typeerror: cannot set property”错误的常见原因。接下来的每个小节都专门介绍其中一种原因及其解决方法。
您还可以通过一些实际的代码示例来了解如何修复这个错误。
无效的 script 标签放置位置
当一个网页加载时，为该页面编写的JavaScript代码也会被加载。JavaScript如何识别文档对象模型(DOM)取决于您在代码中放置 script 标签的位置。
如果您将 script 标签放置在 head 标签内或在 body 标签内所有HTML元素之上，那么该脚本将在DOM准备就绪之前执行。
当JavaScript在DOM准备就绪之前运行时，它无法获取DOM的完整表示，这意味着大多数与DOM元素相关联的变量将返回 null 。
以下是一个例子，如果 script 标签的位置不正确，它将引发JavaScript中的“uncaught typeerror: cannot set property”错误：
<!DOCTYPE html> <html> <head> <title>Uncaught Typeerror Error Tutorial</title> <script src="app.js"></script> </head> <body> <h1 id="heading"></h1> </body> </html>
上述代码中， script 标签放置在 head 标签内。我们还有一个 id 为 heading 的 h1 元素。
接下来，我们将尝试为 h1 元素分配文本值：
let heading = document.getElementById('heading');
heading.textContent = 'This is a heading';
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')
尽管上面的代码看起来没问题，但却引发了“uncaught typeerror: cannot set property”错误。这是因为脚本在DOM之前已经加载，所以我们的JavaScript没有关于DOM元素的知识。
如果将 script 标签放置在其他DOM元素之上，也会引发此错误：
<!DOCTYPE html> <html> <head> <title>Uncaught Typeerror Error Tutorial</title> </head> <body> <script src="app.js"></script> <h1 id="heading"></h1> </body> </html>
现在， script 标签放置在 body 标签中的DOM元素之上，但它仍会引发“uncaught typeerror: cannot set property”错误，因为脚本在DOM之前加载。
要修复此错误，您需要将 script 标签放置在关闭 body 标签之前。这样，所有的DOM元素都会在脚本加载之前加载。
以下是一个正确放置的示例：
<!DOCTYPE html> <html> <head> <title>Uncaught Typeerror Error Tutorial</title> </head> <body> <h1 id="heading"></h1> <script src="app.js"></script> </body> </html>
let heading = document.getElementById('heading');
heading.textContent = 'This is a heading'
运行上述代码后， h1 元素的 textContent 将设置为“This is a heading”。不会出现错误。
拼写错误
拼写错误也是引发“uncaught typeerror: cannot set property”错误的另一个原因。
当您在JavaScript中拼错用于标识DOM元素的属性（ID或类）时，您引用了一个不存在的元素，它将返回一个 null 值。
试图将值分配给 null 值会引发“uncaught typeerror: cannot set property”错误。
以下是一个帮助您理解的代码示例：
<!DOCTYPE html> <html> <head> <title>Uncaught Typeerror Error Tutorial</title> </head> <body> <h1 id="heading"></h1> <script src="app.js"></script> </body> </html>
let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')
在上面的代码中，我们有一个带有 id =” heading “的 h1 标签。
在JavaScript代码中，我们使用错误的拼写引用了id。我们写的是”headin”，而不是”heading”。即，使用了 document.getElementById('headin'); 而不是 document.getElementById('heading');。
为了避免此类错误，始终确保正确引用DOM元素，使用正确的属性且拼写正确。
访问未定义的DOM元素
在上一节中，我们看到引用拼错的属性会引发“uncaught typeerror: cannot set property”错误。当我们尝试访问一个不存在的DOM元素时情况也相同。
在下面的示例中，我们将尝试访问一个在标记中尚未定义的 id 属性：
<!DOCTYPE html> <html> <head> <title>Uncaught Typeerror Error Tutorial</title> </head> <body> <h1></h1> <script src="app.js"></script> </body> </html>
let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')
从上面可以看出，我们试图设置一个不存在的DOM元素的 textContent。在我们的HTML代码中没有任何一个 id 为“heading”的元素，因此会返回一个 null 值。
如果继续将 heading 变量记录到控制台，你将得到一个 null 值。
如何确定变量是“null”还是“undefined”
到目前为止，你已经理解了将值分配给一个 null 或 undefined 的变量很可能会引发“uncaught typeerror: cannot set property”错误。
但是，你可以确定一个变量是 null 还是 undefined ；在与它们交互之前。尽管这不能修复错误，但它可以解释为什么功能不能正常工作。
在讨论如何确定变量在JavaScript中是 null 还是 undefined 之前，了解 null 值和 undefined 值之间的区别很重要。
当给变量分配一个空值或未知值时，该变量是 null 。本教程的前几节示例展示了 null 变量的实际示例。
另一方面，当没有给变量分配值时，该变量是 undefined ：
let age; console.log(age); // undefined
在上面的代码中，声明了 age 变量，但没有给它赋值。当将其记录到控制台时，返回的是 undefined 。
既然你知道了 null 和 undefined 之间的区别，让我们来看看如何确定一个变量是其中之一。
你可以使用宽松相等运算符（ == ）来确定一个变量是 null 还是 undefined。下面是一个示例：
<!DOCTYPE html> <html> <head> <title>Uncaught Typeerror Error Tutorial</title> </head> <body> <h1 id="headin"></h1> <script src="app.js"></script> </body> </html>
let heading = document.getElementById('headin');
if (heading == null) {
console.log('Variable is null - cannot assign value to a null variable');
} else {
heading.textContent = 'Hello World!';
}
在上述代码中，在JavaScript中引用DOM元素时我们拼写错误。
使用if语句，我们检查了 heading 变量的值是否为 null： if (heading == null) {...}
由于返回了 null 值，将在控制台中记录“Variable is null – cannot assign value to a null variable”。如果我们没有得到 null 值，那么将执行 else 块中的代码。
如果你想知道为什么我们没有在 if 语句中包括 undefined ，这是因为在JavaScript中 null == undefined ，所以 if 语句中的代码会同时检查这两种错误。
小结
错误消息在某些情况下可能会令人困惑，但它们帮助开发人员找出代码为什么无法正常工作，并进行修复，以避免将来出现类似的错误。
虽然没有人喜欢错误，但它们是帮助你更好地理解自己喜欢的编程语言的好方法。
此外，修复编码错误可以在遇到类似错误时为你提供更多上下文，无论是在不同项目中还是在使用JavaScript框架和库时都可能会遇到本文讨论的错误。
评论留言