get different inner html from same class

Question

Can anyone help with how do you get the different innerhtml from the same class into an input text? This is the code. Thanks.

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

`getElementsByClassName` returns an HTMLCollection, not a single element. — Rory McCrossan, Mar 09 '17 at 09:22
That's what I thought, the IDs are unique because based on the username. < span id="username1" class="name" > username 1 — Neof, Mar 09 '17 at 09:33

GROVER. · Answer 1 · 2017-03-09T09:39:07.857

1

Something like this will do the trick:

a[2].innerHTML = b.value;

Or if you want the specific item clicked, you could do:

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

NOTE: this also stops the use of inline JS :)

Fiddle: https://jsfiddle.net/yn9wauyk/

edited Mar 09 '17 at 09:39

answered Mar 09 '17 at 09:22

GROVER.

4,071
2
19
66

Did you try this? You'll always get the last span updated when you click. – Jamiec Mar 09 '17 at 09:32
@Jamiec the first one was just an example of how to get a specified `span` :) I added onto it in the second block – GROVER. Mar 09 '17 at 09:33
I think you're misunderstanding me. Turn this code into a snippet or jsfiddle it and you'll see it wont work. – Jamiec Mar 09 '17 at 09:34
@Jamiec try it now :) – GROVER. Mar 09 '17 at 09:35
Hmm it doesn't work. – Neof Mar 09 '17 at 09:36
@Neof hmm, it should do :/ I'll upload a fiddle for you :) – GROVER. Mar 09 '17 at 09:37
Alright, that would be helpful. Thanks. – Neof Mar 09 '17 at 09:39
@Neof done! give it a look :) – GROVER. Mar 09 '17 at 09:39

score 1 · Answer 2 · answered Mar 09 '17 at 09:26

The issue with your code is that getElementsByClassName returns a collection, so you need to loop through that and set the innerHTML of each individual element:

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

score 0 · Answer 3 · answered Mar 09 '17 at 09:34

You would be better to pass a reference to the clicked element into your method - this solves all problems of referencing the correct element by id or by class.

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

<span onclick="myFunction(this);"> HAHA1 </span>
<span onclick="myFunction(this);"> Haha2 </span>

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

get different inner html from same class

3 Answers3