copy text from div to input javascript

0
votes

i was just wondering if there is anyway i could copy text from a div with same class name into an input field

i am trying to copy each name one by from the div with same class name into an input field

function copyname() {
  var elems = document.getElementsByClassName("hud-leaderboard-party");
  var lastElem = elems[elems.length - 1];
  document.getElementsByClassName("hud-intro-name")[0].value = lastElem.innerText;
}
<div class="hud-intro-leaderboard-parties">
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
</div>
<br>


<input type="text" class="hud-intro-name" maxlength="50" style="width: 100%;">
<br><br>
<button class="btn btn-green" style="width: 100%;" onclick="copyname();">COPY NAME</button>

i got it where it will copy all text from div to input on button click but i was wondering is there a way i can only copy one name from the div to input and if button is click again copy next name from div into input and so?

5
javascripthtml
i dont really get it but. in each div you have NAME HERE 1, NAME HERE 2. are you considering name here 1 and name here 2 as 2 different names separated by a coma ? – schieben

5 Answers

3
votes

You can keep track of the index for the current name in the divs (I changed the content of the divs to account for the change in which div should be read):

function copyname() {
  // Keep track of div and name indices
  this.divIndex = typeof this.divIndex === 'number' ? this.divIndex : 0;
  this.index = typeof this.index === 'number' ? this.index : 0; 

  // Get current div
  var elems = document.getElementsByClassName("hud-leaderboard-party");
  if (this.divIndex < elems.length) {
    var elem = elems[this.divIndex];
  } else {
    // Do stuff if out of divs..
    return;
  }
  
  // Get current name
  var currentNames = elem.innerText.split(',');
  if (this.index < currentNames.length) {
    var name = currentNames[this.index].trim();
  document.getElementsByClassName("hud-intro-name")[0].value = name;
  
    // Or if you want to append the names
    //var names = document.getElementsByClassName("hud-intro-name")[0].value;
    //document.getElementsByClassName("hud-intro-name")[0].value += (names === '' ? '' : ',') + name
  }
  
  // Update indices
  this.index++;
  if (this.index >= currentNames.length) {
    this.index = 0;
    this.divIndex++;
  }
}
<div class="hud-intro-leaderboard-parties">
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 5, NAME HERE 6, NAME HERE 7, NAME HERE 8 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 9, NAME HERE 10, NAME HERE 11, NAME HERE 12 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 13, NAME HERE 14, NAME HERE 15, NAME HERE 16 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 17, NAME HERE 18, NAME HERE 19, NAME HERE 20 — <strong>Random numbers</strong></div>
</div>
<br>


<input type="text" class="hud-intro-name" maxlength="50" style="width: 100%;">
<br><br>
<button class="btn btn-green" style="width: 100%;" onclick="copyname();">COPY NAME</button>

There sure is space for further simplification and optimization (by storing the div node itself instead of always querying the innerText) but the idea is the same.

0
votes

You can do something like this: Introduce a counter variable and increase its value on each click. Set its value again to 0 for circular look i.e. last to first 

var counter = 0;
function copyname() {
  var elems = document.getElementsByClassName("hud-leaderboard-party");
  var lastElem = elems[counter];
  document.getElementsByClassName("hud-intro-name")[0].value = lastElem.innerText;
  counter += 1;
  if (counter >= elems.length) {
  counter = 0;
  }
}
0
votes

From what I understand you're able to get all the text in the div.
And each div has multiple names. So if you want to get a list of names instead of all the names as one string what you need is the String.split method. Which will let you split on commas. 

->x = "NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 "
"NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 "
->x.split(',')
(4) ["NAME HERE 1", " NAME HERE 2", " NAME HERE 3", " NAME HERE 4 "]

This along with keeping a counter variable will let you pick names one by one.
Also keeping a counter variable will let you select different divs on each click if that is what you want.

0
votes

You need to keep a counter and reduce it on the number of clicks, reset it to the elems length when it equals zero.

  var elems = document.getElementsByClassName("hud-leaderboard-party");
  var counter = elems.length;
function copyname() {
  var lastElem;
  if(counter <= 0) 
     counter = elems.length;

   lastElem = elems[counter - 1];
  document.getElementsByClassName("hud-intro-name")[0].value = lastElem.innerText; 
  counter--;
 
}
<div class="hud-intro-leaderboard-parties">
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 2, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 3, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 4, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 5, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
</div>
<br>


<input type="text" class="hud-intro-name" maxlength="50" style="width: 100%;">
<br><br>
<button class="btn btn-green" style="width: 100%;" onclick="copyname();">COPY NAME</button>
0
votes

If all your names are separated by, say, a comma, then you can do something like the following. You could also delimit by space if you want. Things get a bit more tricky if you have other content inside the div, like what's in those strong tags.

function copyname() {
  var nameArray = "";
  var inp = document.getElementById("inp");
  var elems = document.getElementsByClassName("hud-leaderboard-party");
  //
  if (elems) {
    for (x = 0; x < elems.length; x++) {
      var res = elems[x].innerHTML;
      res = res.replace("<strong>", "");
      res = res.replace("</strong>", "");
      nameArray = res.split(",");
      inp.value += nameArray;
    }
  }
}
<div class="hud-intro-leaderboard-parties">
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
</div>
<br>


<input type="text" id="inp" class="hud-intro-name" maxlength="50" style="width: 100%;">
<br><br>
<button class="btn btn-green" style="width: 100%;" onclick="copyname();">COPY NAME</button>