JavaScript 中 TypeError: Cannot read property 'value' of Null 错误

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 中 TypeError: Cannot read property 'value' of Null 错误

作者：迹忆客最近更新：2022/12/23 浏览次数：

发生“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);

JavaScript 中 TypeError- Cannot read property 'value' of Null

如果我们使用 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"