无法在 JavaScript 中设置 NULL 错误的属性 [已解决]

作者

Cannot set properties of NULL 错误[已解决]

Cannot set property ‘innerHTML’ of Null in JavaScript

出现“TypeError: Cannot set properties of null”的原因有 3 个：

  1. 在存储值的变量上设置属性null。
  2. 为 DOM 中不存在的元素设置属性。
  3. 在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。

无法设置 null 的属性 innerhtml

如果您在存储值的变量上设置属性，则会发生此错误null。

这里有些例子。

索引.js
const el = null;

// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
el.innerHTML = 'new value';

// ---------------------------------------------

// ⛔️ TypeError: Cannot set properties of null (setting 'value')
const obj = null;
obj.value = 'example'

// ---------------------------------------------
const arr = null;
// ⛔️ Uncaught TypeError: Cannot set properties of null (setting '0')
arr[0] = 'value';

解决错误的一种方法是在初始化变量时提供回退值。

索引.js
const fromDb = null;

const obj = fromDb || {};
obj['src'] = 'value'; // 👉️ {src: 'value'}

const arr = fromDb || [];
arr[0] = 'value'; // 👉️ ['value']

如果左边的值是假的（例如 ），逻辑 OR (||) 运算符返回右边的值null。

如果fromDb变量存储一个null值，则返回一个空对象或一个空数组。

您还可以
在设置属性之前使用if语句
检查变量是否存在。null

索引.js
const obj = null;

if (obj != null) {
  obj.property = 'value';
}

console.log(obj); // 👉️ null

该if块仅在fromDb变量不存储null
值时运行。

确保你访问的DOM元素存在

确保您正在访问的 DOM 元素存在。

在使用方法后尝试设置属性
getElementById()并将其传递给不存在的id.

索引.js
const el = document.getElementById('does-not-exist');
console.log(el); // 👉️ null

// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
el.innerHTML = 'Hello world';

我们将idDOM 中不存在的一个传递给该
document.getElementById()方法。

如果提供的元素
不存在，则该getElementById()方法返回。nullid

尝试访问值的属性null会导致错误。

确保您访问的是正确的 DOM 元素，并添加条件检查以确保该元素在设置属性之前存在。
索引.js
const el = document.getElementById('does-not-exist');
console.log(el); // 👉️ null

if (el) {
  el.innerHTML = 'Hello world';
} else {
  console.log('element not found');
}

if如果变量存储一个值，则If块将不会运行null。

出现错误的另一个常见原因是在声明 DOM 元素之前放置 JS 脚本标记。

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

确保在正文底部插入 JS 脚本标签。

JS 脚本标签应该放在 HTML 元素声明之后。

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

    <div id="box">Content</div>
  </body>
</html>

请注意，JS 脚本位于div元素上方。

HTML 代码是从上到下解析的，因此文件在创建元素index.js之前运行。div

因此我们无法访问文件div中的index.js。

索引.js
const el = document.getElementById('box');
console.log(el); // 👉️ null

// ⛔️ Cannot set properties of null (setting 'innerHTML')
el.innerHTML = 'Hello world';

相反，必须将 JS 脚本标记移动到它尝试访问的 DOM 元素下方。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="box">Content</div>

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

现在，我们可以访问文件div中的元素index.js。

索引.js
const el = document.getElementById('box');
console.log(el); // 👉️ div#box

// ✅ Works
el.innerHTML = 'Hello world';

设置 innerhtml 属性成功

现在 HTML 元素是在index.js脚本运行之前创建的，我们可以访问 DOM 元素并设置其innerHTML属性。

要解决“TypeError：无法设置 null 的属性”错误，请确保：

  1. 您不是在值上设置属性null。
  2. 您没有在不存在的 DOM 元素上设置属性。
  3. 您还没有将 JS 脚本标记放在它需要访问的元素之上。

解决特定属性错误的示例

以下是解决特定属性和方法错误的一些示例。

目录

  1. 无法设置 null 的属性（设置“onclick”）
  2. 无法设置 null 的属性（设置“textContent”）
  3. 无法设置 null 的属性（设置“值”）
  4. 无法设置 null 的属性（设置“src”）

不能设置 null 的属性（设置 ‘onclick’）

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

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

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

索引.js
const button = null;

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

无法设置 null 的属性 onclick

要解决错误，请确保：

  1. 您正在访问其属性的 DOM 元素onclick存在。
  2. 您已将 JS 脚本标签放在 body 标签的底部。
索引.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属性成功

无法设置 null 的属性（设置 ‘textContent’）

发生错误有两个原因：

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

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

索引.js
const element = null;

// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'textContent')
element.textContent = 'some content';

无法设置 null 的属性文本内容

要解决错误，请确保：

  1. 您设置textContent属性的 DOM 元素存在。
  2. 您已将 JS 脚本标签放在 body 标签的底部。
索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="box">Old content</div>

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

Now, the div element can be accessed from the index.js file.

index.js
const element = document.getElementById('box');
console.log(element); // 👉️ div#box

// ✅ Works
element.textContent = 'New content';

# Cannot set properties of null (setting ‘value’) in JS

The “TypeError: Cannot set properties of null (setting ‘value’)” error occurs
for 3 reasons:

  1. Setting the value property on a variable that stores a null value.
  2. Setting the value property on a DOM element that doesn’t exist.
  3. Placing the JS script tag above the HTML, where the DOM elements are
    declared.

The error occurs if you set the value property on a variable that stores a
null value.

index.js
const input = null;

// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'value')
input.value = 'new value';

无法将属性值设置为 null

One way to solve the error is to use the logical OR (||) operator to provide a
fallback if the variable is null.

index.js
const fromDb = null;

// ✅ Provide empty object fallback
const obj = fromDb || {};

obj.value = 'new value';
console.log(obj); // 👉️ {value: 'new value'}

Make sure you’re accessing the correct DOM element and add a conditional check
to be certain the element is found, before setting a property on it.

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

if (input) {
  input.value = 'New value';
} else {
  console.log('input does not exist');
}

To solve the error, make sure:

  1. The DOM element on which you are setting the value property exists.
  2. You have placed the JS script tag at the bottom of the body tag.
index.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>

Now, we can access the input element inside the index.js file.

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

// ✅ Works
input.value = 'New value';

# Cannot set properties of null (setting ‘src’)

The “TypeError: Cannot set properties of null (setting ‘src’)” occurs for 2
reasons:

  1. Setting the src property on a null value (image element that doesn’t
    exist).
  2. Inserting the JS script tag above the HTML where the DOM elements are
    declared.

Here is an example of how the error occurs.

index.js
const image = null;

// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'src')
image.src = 'photo.jpg';

无法设置 null 的属性 src

To solve the error, make sure:

  1. The DOM element on which you are setting the src property exists.
  2. You have placed the JS script tag at the bottom of the body tag.
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <img id="photo" width="200" height="200" src="cat.jpg" />

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

现在img可以从文件访问该元素index.js。

索引.js
const image = document.getElementById('photo');
console.log(image); // 👉️ img#photo

// ✅ Works
image.src = 'photo.jpg';