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

无法在 JS 中设置 null 的属性（设置 ‘onchange’）

Cannot set property ‘onchange’ of Null in JavaScript

“TypeError: Cannot set properties of null (setting ‘onchange’)”的发生有两个原因：

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

无法将属性 onchange 设置为 null

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

索引.js


const input = null;

// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'onchange')
input.onchange = function handleChange(event) {
  console.log(event.target.value);
};

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

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

索引.js


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

// ⛔️ Cannot set properties of null (setting onchange)
input.onchange = function handleChange(event) {
  console.log(event.target.value);
};

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

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

要解决“TypeError: Cannot set properties of null (setting ‘onchange’)”，将 JS 脚本标签放在 body 标签的底部。该脚本应在创建 DOM 元素后运行。

索引.html


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

    <input id="first_name" name="first_name" type="text" />
  </body>
</html>

我们将 JS 脚本标记放在创建input元素的代码上方。

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

索引.js


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

// ⛔️ TypeError: Cannot set properties of null (setting 'onchange')
input.onchange = function handleChange(event) {
  console.log(event.target.value);
};

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

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <input id="first_name" name="first_name" type="text" />

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

现在，该index.js文件可以访问该input元素。

索引.js


const input = document.getElementById('first_name');
console.log(input); // 👉️ input#first_name

// ✅ Works
input.onchange = function handleChange(event) {
  console.log(event.target.value);
};

结论

“TypeError: Cannot set properties of null (setting ‘onchange’)”错误发生在试图设置一个值的onchange属性时。null

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

–