单击时 JavaScript 按钮文本 innerHTML 未更改答案

【问题标题】：JavaScript Button Text innerHTML not Changing when Clicked单击时 JavaScript 按钮文本 innerHTML 未更改
【发布时间】：2019-02-09 09:13:18
【问题描述】：

我对 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>

【问题讨论】：

getElementsByClassName 从 DOM 返回匹配类名的数组集合。所以在这种情况下使用getElementsByClassName('testBtn')[0]

标签： javascript html

【解决方案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>

【讨论】：

@user8758206 很高兴为您提供帮助。
也可以通过document.querySelector('.testBtn') 或document.querySelectorAll('.testBtn')[0] 完成第一个元素。

【解决方案2】：

document.getElementsByClassName("name") 为您提供一个数组，该数组的第一个元素是您的元素。您需要执行 document.getElementByClassName[0] 才能访问该元素。尝试改用 document.querySelector。此外，您可以转到 Web 控制台查看您的代码发生了什么。

【讨论】：

【解决方案3】：

你可以使用querySelector:

function change() {
    var btnToChange = document.querySelector(".testBtn");
    btnToChange.innerHTML = "it changed!";
}

或者getElementsByClassName:

function change() {
    var btnToChange = document.getElementsByClassName("testBtn")[0];
    btnToChange.innerHTML = "it changed!";
}

注意querySelector和querySelectorAll是document和所有元素的方法，但getElementsByClassName只是document的方法。

【讨论】：

【解决方案4】：

document.getElementsByClassName 返回一个包含所有 DOM 元素的类数组对象。您可以使用 document.querySelector 或 document.getElementsByClassName()[0] 来获取第一个元素。

function change() {
  var btnToChange = document.querySelector(".testBtn");
  btnToChange.textContent= "it changed!";
}

【讨论】：