Get innerText from div to input javascript

Question

I'm trying to copy each username one by one from a div with the same class name into an input field.

I got it where it will copy all text from div to input on button click but how can I separate usernames?

copy names one by one to the input so if i press the button it copy name 1 to input and if i press button again it copy name 2 to input but removes name 1 and if press again it copy name 3 to input and removes name 2

how can i split so it just copy one user name to input?

var elems = document.getElementsByClassName("leaders");
var counter = elems.length;

function getUsers() {
  var Elem;
  if (counter <= 0)
    counter = elems.length;
  Elem = elems[counter - 1];
  document.getElementById("inp").value = Elem.innerText.split(" — ")[0].split(", ");
  counter--;
}


  user 1, user 2, user 3, user 4 — 1
  user 5, user 6, user 7, user 8 — 2
  user 9, user 10, user 11, user 12 — 3
  user 13, user 14, user 15, user 16 — 4
  user 17, user 18, user 19, user 20 — 5

user_10536112 · Answer

function getUsers() {
//to remove strong tags
var nodes = document.getElementsByTagName("strong");
for (var i = 0, len = nodes.length; i != len; ++i) {
    nodes[0].parentNode.removeChild(nodes[0]);
}

  var nameArray = "";
  var elems = document.getElementsByClassName("leaders");
  if (elems) {
    for (x = 0; x < elems.length; x++) {
      var res = elems[x].innerText;
      nameArray = res.split(",");
      inp.value += nameArray;
    }
  }
}


  user 1, user 2, user 3, user 4 — 1
  user 5, user 6, user 7, user 8 — 2
  user 9, user 10, user 11, user 12 — 3
  user 13, user 14, user 15, user 16 — 4
  user 17, user 18, user 19, user 20 — 5

user_4281779 · Answer

You could split the users and add them to a separated array using split() then merge them using concat() when you want with the delimiter you want :

function getUsers() {
  var users = [];
  var el = document.getElementsByClassName("leaders");

  if (el.length) {
    for (x = 0; x < el.length - 1; x++) {
      users = users.concat(el[x].innerText.split(" — ")[0].split(", "))
    }
  }

  document.getElementById("inp").value = users.join(' - ');

  console.log(users);
}

  




  user 1, user 2, user 3, user 4 — 1
  user 5, user 6, user 7, user 8 — 2
  user 9, user 10, user 11, user 12 — 3
  user 13, user 14, user 15, user 16 — 4
  user 17, user 18, user 19, user 20 — 5

user_3860531 · Answer

var elems = document.getElementsByClassName("leaders");
var counter = elems.length;
var arrayLength=0;
var maxLengthArray=0;

function getUsers() {
  var Elem;
  if (counter <= 0)
    counter = elems.length;
  Elem = elems[counter - 1];
  document.getElementById("inp").value = Elem.innerText.split(" — ")[0].split(", ")[arrayLength];
  maxLengthArray=Elem.innerText.split(" — ")[0].split(", ").length;
 if(maxLengthArray==arrayLength){
    arrayLength=0;
    counter--;
 }else{
    arrayLength++;
 }
}


  user 1, user 2, user 3, user 4 — 1
  user 5, user 6, user 7, user 8 — 2
  user 9, user 10, user 11, user 12 — 3
  user 13, user 14, user 15, user 16 — 4
  user 17, user 18, user 19, user 20 — 5

I hope this is the expected result for you.

Get innerText from div to input javascript

3 Answers