单击时 JavaScript 按钮文本 innerHTML 不更改

Question

我是 javascript 的新手，我想找出为什么元素的文本内容在应该更改时却没有更改。我只想在单击“单击我”按钮时更改“+”的文本内容。

元素应该改变。为什么它在这里不起作用？阅读相关post后，详细解释将非常有帮助.感谢您的帮助。

function change() {
var btnToChange = document.getElementsByClassName("testBtn");

btnToChange.innerHTML = "it changed!";
}

<button class="testBtn">+</button>
<button class="testBtn2" onclick="change()">Click to Change</button>

Answer 1

您需要执行 document.getElementsByClassName("testBtn")[0]; 因为 document.getElementsByClassName 将返回与类匹配的元素数组，尽管DOM 中只有一个元素。由于您只有一个元素，因此请使用 [0]。

function change() {
  var btnToChange = document.getElementsByClassName("testBtn")[0];

  btnToChange.innerHTML = "it changed!";
}

<button class="testBtn">+</button>
<button class="testBtn2" onclick="change()">Click to Change</button>