解决 - 无法读取Null的属性“点击”

有两个原因造成这个bug:

对不存在的DOM元素调用click()方法；
将js脚本标签放在声明DOM元素的HTML上方。

这是错误发生的示例。

要解决次错误，请确保你获取的元素id是存在的，如果id不存在会发生错误。

const el = document.getElementById('do-not-exist');
console.log(el); // null

el.click(); // ⛔️ Cannot read properties of null (reading 'click')

若一个值不存在，那么null调用click()方法就会报错。

第二种可能

将js script标签放在body标签的地步。该脚本应在穿件DOM元素后运行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ⛔️ BAD - 在按钮存在之前运行脚本 ⛔️ -->
    <script src="index.js"></script>

    <button id="btn" onclick="console.log('Button clicked')">
      Do stuff
    </button>
  </body>
</html>

请注意，JS脚本卫浴button元素的代码上方。意味着脚本文件在button元素可用之前运行。

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

// ⛔️ Cannot read properties of null (reading 'click')
el.click();

相反，将js脚本放在底部是正确的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <button id="btn" onclick="console.log('Button clicked')">
      Do stuff
    </button>

    <!-- ✅ GOOD - -   按钮已经存在 ✅ -->
    <script src="index.js"></script>
  </body>
</html>

现在我们可以访问button内部的元素index.js

const el = document.getElementById('btn');
console.log(el); // 👉️ button#btn

// ✅ works
el.click();

结论

要解决此bug，请在DOM元素可用后运行JS脚本，并确保仅在有效DOM元素上调用该方法。

Uncaught TypeError: Cannot read properties of null(reading 'click)

解决 - 无法读取Null的属性“点击”

第二种可能

结论