如何修复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”错误：

上述代码中， 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元素之上，也会引发此错误：

现在， script 标签放置在 body 标签中的DOM元素之上，但它仍会引发“uncaught typeerror: cannot set property”错误，因为脚本在DOM之前加载。

要修复此错误，您需要将 script 标签放置在关闭  body 标签之前。这样，所有的DOM元素都会在脚本加载之前加载。

以下是一个正确放置的示例：

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”错误。

以下是一个帮助您理解的代码示例：

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 属性：

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。下面是一个示例：

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框架和库时都可能会遇到本文讨论的错误。

原文地址：https://www.wbolt.com/uncaught-typeerror-cannot-set-property.html