javascript - 试图改变按钮的值(value)

Question

我试图在单击按钮时更改按钮的值，所以我在 JavaScript 中创建了一个函数，在该函数中，我通过获取按钮的 ID 并通过 style.backImage 尝试改变它。

但是它显示这个错误:

Uncaught TypeError: Cannot set properties of null (setting 'value')

这是按钮的代码:

<button id="id1" style="margin: 17px;" onclick="mark()"> . </button>

JavaScript 函数如下:

function mark(){
  document.getElementById(id1).style.backgroundImage = "url('cruz.webp')";
}

我试过将 JavaScript 文档从 HTML 的头部移动到主体，但没有取得任何效果。

我知道这一定很简单，但非常感谢您的帮助。

Answer 1

您的代码的问题出在代码的 JavaScript 部分，函数 getElementById()。

---

您需要将 getElementById() 中传递的参数更改为如下所示。

document.getElementById("id1");

区别在于您的代码没有用引号括起来的 id1，但是这个答案用引号括起来的是 "id1"。

---

出现错误的原因是变量 id1(这是 JavaScript 认为的)未定义，因此 getElementById() 返回 null ，这是错误状态(如下所示)。

Uncaught TypeError: Cannot set properties of null (setting 'value')

当您用引号将 id1 括起来时，JavaScript 应该找到该元素并返回一个 Element，这应该会阻止错误出现并使您的代码正常工作。