当前位置：首页 > 编程语言 > 正文内容

如何修复JavaScript中的 “uncaught typeerror: cannot set property” 错误

a811625532年前 (2023-11-16)编程语言14

作为一名 *** 开发人员，在使用 时难免会遇到错误。编码错误会阻止程序完成预期的操作。

为了能够修复这些错误，您需要能够理解错误信息，因为这将有助于您理解错误产生的原因以及如何修复。

在本教程中，我们将讨论 JavaScript 中的 “uncaught typeerror: cannot set property” 错误。

您将了解到该错误发生的原因、可能遇到该错误的不同原因以及修复该错误的不同 *** 。

“Uncaught TypeError: Cannot set property”在JavaScript中的意思是什么？

typeerror 主要发生在涉及不兼容数据类型的操作中。在我们的案例中，我们遇到了“uncaught typeerror: cannot set property”错误，这是一个 ，主要发生在您尝试向一个具有 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 标签内所有之上，那么该脚本将在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 语句中的代码会同时检查这两种错误。

小结

错误消息在某些情况下可能会令人困惑，但它们帮助开发人员找出代码为什么无法正常工作，并进行修复，以避免将来出现类似的错误。

虽然没有人喜欢错误，但它们是帮助你更好地理解自己的好 *** 。

此外，修复编码错误可以在遇到类似错误时为你提供更多上下文，无论是在不同项目中还是在使用时都可能会遇到本文讨论的错误。

扫描二维码推送至手机访问。

版权声明：本文由2345好导航站长资讯发布，如需转载请注明出处。

本文链接：http://2345hao.cn/blog/index.php/post/8098.html

分享给朋友：
返回列表

上一篇：如何修复 “Uncaught TypeError: $ Is Not a Function” 错误

下一篇：PHP 8.3：最新版本中的新功能和变化

“如何修复JavaScript中的 “uncaught typeerror: cannot set property” 错误” 的相关文章

静态与动态IP地址有何区别？

静态与动态IP地址有何区别？

每台连接到Internet的计算机都有一个Internet协议 (IP) 地址。但是，并非所有IP地址的外观或行为都相同。 如果您使用计算机网络或服务器，了解动态IP和静态IP之间的区别至关重要。通过详细了解每个协议，您可以选择最适合您需求的解决方案。 在本文中，我们将讨论静态和动态IP之间...

宝塔面板教程之计划任务篇

宝塔面板教程之计划任务篇

宝塔面板的计划任务，主要用于安排和管理需要定时执行的任务，如备份、内存清理等。其实对于大部分站长来说，主要使用该板块的备份网站、备份数据库及释放内存的三个定时任务计划。   Shell脚本的添加 输入任务名称，选择执行周期，输入执行的脚本内容。 注意事项： 输入脚本内容...

什么是Node.js以及为什么要使用它

什么是Node.js以及为什么要使用它

JavaScript是世界上最流行的编程语言之一。今天，它为数百万个网站提供支持，并吸引了成群的开发人员和设计人员为Web构建功能。如果您是编程新手，那么 JavaScript很容易成为之一。 在最初的20年里，JavaScript主要用于客户端脚本。由于JavaScript只能在<scr...

Serverless PHP简介：主要功能、用例以及如何在Lambda上开始使用Bref

Serverless PHP简介：主要功能、用例以及如何在Lambda上开始使用Bref

无服务器计算是一种基于云的执行模型，可以将应用程序作为服务托管，而无需维护服务器。 服务提供商维护服务器上的资源分配，并根据实际使用情况向用户收费。焦点转移到一个人正在创建的核心应用程序上，基础设施完全由服务提供商处理。无服务器计算也称为功能即服务 (FaaS)。 换句话说，Serverle...

揭开Laravel面纱：用于构建Web应用程序的跨平台PHP框架

揭开Laravel面纱：用于构建Web应用程序的跨平台PHP框架

近年来，Web应用程序和网站的开发变得越来越简单。即使是我们当中最受技术挑战的人也已经相当熟练地使用WordPress和Wix等产品。 对于更高级的开发人员，有许多工具可以帮助简化开发过程。这些工具中最有用的工具之一是Laravel。 本文回答了“什么是Laravel？”这个问题。通过将其分...

安装DragonflyDB内存数据存储以提升网站性能

安装DragonflyDB内存数据存储以提升网站性能

DragonflyDB是一个内存数据存储应用程序，可以帮助提高网站性能。 DragonflyDB DragonflyDB是一个免费的内存数据存储应用程序，运行在Linus OS上。它使用每核线程架构来减少延迟。Dragonfly与Redis和Memcached兼容。它是KeyDB的合...

Copyright 2345hao.cn Rights Reserved.琼ICP备2025061540号-1

Powered By Z-BlogPHP. Theme by TOYEAN.

您是本站第463877名访客 今日有3篇新文章/评论