JavaScript 中 TypeError: Cannot read property 'value' of Null 错误
发生“TypeError: Cannot read property 'value' of Null”错误的主要原因有 2 个：
- 访问空值（不存在的 DOM 元素）的值属性。
- 在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。
下面是产生上述错误的示例代码。
const el = null;
// ⛔️ TypeError: Cannot read properties of null (reading 'value')
console.log(el.value);
如果我们使用 getElementById() 方法并向其传递一个 DOM 中不存在的 ID，则最常发生该错误。
const input = document.getElementById('does-not-exist');
console.log(input); // 👉️ null
// ⛔️ Cannot read properties null (reading 'value')
const value = input.value;
要解决“Cannot read property 'value' of Null”错误，请确保我们没有访问 null 值上的 value 属性，例如 一个不存在的 DOM 元素。
DOM 中不存在具有提供的 id 的元素，因此 getElementById 方法返回 null。 当我们尝试访问 null 值的 value 属性时，我们得到了错误。
我们可以使用可选的链接 ?. 运算符、三元运算符或简单的 if 语句来避免错误。
const input = document.getElementById('does-not-exist');
// ✅ Using optional chaining ?.
const value1 = input?.value || '';
// ✅ Using ternary operator
const value2 = input ? input.value : '';
// ✅ using if/else
if (input) {
const value3 = input.value;
} else {
console.log('input is falsy');
}
出现错误的另一个常见原因是将 JS 脚本标记放在声明 DOM 元素的代码之前。
要解决“Cannot read property 'value' of null”错误，请确保在声明 DOM 元素后将 JS 脚本标记放置在正文的底部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<!-- ⛔️ BAD - Script is run before input is created ⛔️ -->
<script src="index.js"></script>
<input
id="first_name"
type="text"
name="first_name"
value="Initial Value"
/>
</body>
</html>
我们将 JS 脚本标记放在创建输入元素的代码上方，因此 index.js 文件在创建 DOM 元素之前运行。
这意味着在 index.js 文件中将无法访问输入。
const input = document.getElementById('first_name');
console.log(input); // 👉️ null
// ⛔️ Cannot read properties null (reading 'value')
const value = input.value;
我们必须将 JS 脚本标记移动到正文的底部，在 HTML 元素之后。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<input
id="first_name"
type="text"
name="first_name"
value="Initial Value"
/>
<!-- ✅ GOOD - Script is run after input is declared ✅ -->
<script src="index.js"></script>
</body>
</html>
现在 input 元素在 index.js 文件中可用。
const input = document.getElementById('first_name');
console.log(input); // 👉️ input#first_name
// ✅ Works
const value = input.value;
console.log(value); // 👉️ "Initial value"
现在 HTML 元素是在 index.js 脚本运行之前创建的，我们可以访问输入元素。
总结
发生“TypeError: Cannot read property 'value' of Null”错误的主要原因有 2 个：
- 访问空值（不存在的 DOM 元素）的值属性。
- 在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
