JavaScript 中 Cannot set property ‘disabled’ of Null 错误

JavaScript 2年前 717

出现“Cannot set property ‘disabled’ of Null”错误的原因有两个：

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

下面是产生上面错误的一个示例代码

const button = null;

// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'disabled')
button.disabled = true;

要解决“Cannot set property ‘disabled’ of Null”错误，请确保我们用于访问元素的 ID 存在于 DOM 中。该错误通常发生在向 getElementById 方法提供不存在的 id 之后。

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

// ⛔️ Cannot set properties of null (setting 'disabled')
button.disabled = true;

我们将一个不存在的 id 传递给 getElementById 方法并得到一个空值。

将 disabled 属性设置为空值会导致错误。

要解决“Cannot set property ‘disabled’ of null”的错误，将 JS script 标签放在 body 标签的底部。该脚本应在创建 DOM 元素后运行。

<!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">Submit</button>
  </body>
</html>

我们将 JS 脚本标记放在创建按钮元素的代码上方。这意味着 index.js 文件在创建按钮之前运行，因此我们无权访问 index.js 文件中的按钮元素。

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

// ⛔️ Cannot set properties of null (setting 'disabled')
button.disabled = true;

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

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

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

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

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

// ✅ Works
button.disabled = true;

总结

尝试将 disabled 属性设置为 null 时，会出现“Cannot set property ‘disabled’ of null”错误。

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。

JavaScript

总结

相关文章