无法在 JS 中设置 null 的属性（设置“onclick”）

Cannot set property ‘onclick’ of Null in JavaScript

“无法设置 null 的属性（设置‘onclick’）”错误的发生有两个原因：

将onclick属性设置为一个null值（不存在的 DOM 元素）。
将 JS 脚本标记放在声明 DOM 元素的 HTML 上方。

无法设置 null 的属性 onclick

下面是错误如何发生的示例。

索引.js


const button = null;

// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'onclick')
button.onclick = function click() {
  console.log('Button clicked');
};

要解决“TypeError: Cannot set properties of null (setting ‘onclick’)”，请确保id您用于访问元素的元素存在于 DOM 中。

该错误通常发生在向方法提供不存在id的
内容之后getElementById()。

索引.js


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

// ⛔️ Cannot set properties of null (setting 'onclick')
button.onclick = function click() {
  console.log('Button clicked');
};

id我们向该方法传递了一个不存在的值getElementById() 并取回了一个null值。

在值上设置onclick属性null会导致错误。

将 JS 脚本标签放在 body 标签的底部

要解决“TypeError: Cannot set properties of null (setting ‘onclick’)”，将 JS 脚本标签放在 body 标签的底部。

该脚本应在声明 DOM 元素后运行。

索引.html


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

    <button id="btn">Click me</button>
  </body>
</html>

请注意，HTML 代码是从上到下解析的。

我们将 JS 脚本标记放在声明button元素的代码上方。

该index.js文件在button创建之前运行，因此我们无法访问文件button中的元素index.js。

索引.js


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

// ⛔️ Cannot set properties of null (setting 'onclick')
button.onclick = function click() {
  console.log('Button clicked');
};

JS 脚本标签应该移到的底部body，在它需要访问的所有 DOM 元素之后。

索引.html


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

    <!-- ✅ GOOD - button already exists ✅ -->
    <script src="index.js"></script>
  </body>
</html>

现在index.js文件可以访问button元素了。

索引.js


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

// ✅ Works
button.onclick = function click() {
  console.log('Button clicked');
};

结论

onclick尝试在值上设置属性时发生“TypeError：无法设置 null 的属性（设置‘onclick’）” null。

要解决该错误，请在 DOM 元素可用后运行 JS 脚本，并确保只在有效的 DOM 元素上设置该属性。

–