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];，因为尽管DOM中只有一个元素，但document.getElementsByClassName将返回与该类匹配的元素数组。由于您只有一个元素，因此请使用[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>

Answer 2

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

Answer 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的方法。

Answer 4

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

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

单击时JavaScript按钮文本innerHTML不变

4 个答案: