javascript - 从同一个类获取不同的内部 html

Question

这个问题已经有答案了:

What do querySelectorAll and getElementsBy* methods return? (12 个回答)

已关闭 6 年前。

任何人都可以帮助您如何将同一类中的不同innerhtml 获取到输入文本中吗？这是代码。谢谢。

function myFunction() {
  var a = document.getElementsByClassName("name");
  var b = document.getElementById("whispering");
  a.innerHTML = b.value;
}

<span onclick="myFunction();" class="name" id="username1"> Username 1 </span>
<span onclick="myFunction();" class="name" id="username2"> Username 2 </span>

<input type="text" id="whispering">

Answer 1

您的代码的问题是 getElementsByClassName 返回一个集合，因此您需要循环遍历该集合并设置每个单独元素的 innerHTML:

function myFunction() {
  var a = document.getElementsByClassName("name");
  var b = document.getElementById("whispering");

  for (var i = 0; i < a.length; i++) {
    a[i].innerHTML = b.value;
  }
}

<span onclick="myFunction();" class="name" id="1"> HAHA1 </span>
<span onclick="myFunction();" class="name" id="2"> Haha2 </span>

<input type="text" id="whispering">