Question

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

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">

Answer 2

这样的事情可以解决问题：

a[2].innerHTML = b.value;

或者如果您想要点击特定项目，您可以这样做：

<强> HTML ：

<span id="1" class="name">Content</span>
<span id="2" class="name">Content</span>

<强> JS ：

var spans = document.getElementsByClassName("name");

for(var i = 0; i < spans.length; i++){
    spans[i].onclick = function(){
        this.innerHTML = b.value;
    }
}

注意：这也会停止使用内联 JS ：）

小提琴： https://jsfiddle.net/yn9wauyk/

Answer 3

最好将对被点击元素的引用传递给您的方法 - 这解决了通过id或类引用正确元素的所有问题。

＆＃13;

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

＆＃13;

<span onclick="myFunction(this);"> HAHA1 </span>
<span onclick="myFunction(this);"> Haha2 </span>

<input type="text" id="whispering">

＆＃13;

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

3 个答案: