單擊時，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> 

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!";
}