JavaScript 中 Cannot read property 'addEventListener' of Null 错误

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

Vue React JavaScript Angular CSS HTML

JavaScript 中 Cannot read property 'addEventListener' of Null 错误

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

发生“Cannot read property 'addEventListener' of Null”错误的主要原因有两个：

在 DOM 中不存在的元素上访问 addEventListener() 方法。
在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。

发生错误的主要原因是当我们尝试对未找到的 DOM 元素调用 addEventListener() 方法时。

const btn = document.getElementById('does-not-exist');
console.log(btn); // 👉️ null

// ⛔️ Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
btn.addEventListener('click', () => {
  console.log('btn clicked');
});

JavaScript 中 Cannot read property 'addEventListener' of Null

我们使用了 DOM 中不存在的 id，因此 getElementById 方法返回 null。

当我们在不存在的 DOM 元素上调用 addEventListener() 方法时，会出现错误“Cannot read property addEventListener of null”。要解决此错误，请在调用 addEventListener() 方法之前使用 if 语句检查 DOM 元素是否存在。

const btn = document.getElementById('does-not-exist');
console.log(btn); // 👉️ null

// ✅ Check if btn exists before addEventListener()
if (btn) {
  btn.addEventListener('click', () => {
    console.log('btn clicked');
  });
}

// ✅ Using optional chaining (?.)
btn?.addEventListener('click', () => {
  console.log('btn clicked');
});

确保传递正确的标识符并添加 if 语句以检查 DOM 元素是否存在。

第二个示例使用可选的链接 ?. 运算符，它会短路而不是抛出错误。

如果 btn 变量的值为 null 或 undefined，则运算符返回 undefined，否则调用该方法。

要解决“Cannot read property addEventListener of null”错误，请确保在正文底部插入 JS 脚本标记。 JS 脚本标签应该放在 HTML 元素声明之后。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ❌ BAD - Script is run before button is declared ❌ -->
    <script src="index.js"></script>

    <button id="btn">Submit</button>
  </body>
</html>

示例中的 JS 脚本标记位于按钮元素声明之前，因此按钮元素在 index.js 文件中将不可用。

const btn = document.getElementById('btn');
console.log(btn); // 👉️ null

// ⛔️ cannot read properties of null (reading 'addEventListener')
btn.addEventListener('click', () => {
  console.log('btn clicked');
});

在声明 HTML 元素之后，我们必须将 JS 脚本标记移动到正文的底部。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <button id="btn">Submit</button>

    <!-- ✅ GOOD - HTML is already declared ✅ -->
    <script src="index.js"></script>
  </body>
</html>

现在 index.js 文件可以访问 DOM 元素，因为它们已经在脚本运行时声明了。

const btn = document.getElementById('btn');
console.log(btn);

// ✅ Works as expected
btn.addEventListener('click', () => {
  console.log('btn clicked');
});