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

Question

我对javascript还是比较陌生，并且试图找出为什么元素的文本内容在应该改变的时候没有改变的原因。我只希望单击“单击我”按钮时更改“ +”的文本内容。

元素应更改。为什么在这里不起作用？阅读相关文章后，进行详细的解释将非常有帮助。谢谢你的帮助。

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>