javascript - 将文本从 div 复制到输入 javascript

Question

我只是想知道是否可以将文本从具有相同类名的 div 复制到输入字段

我正在尝试将具有相同类名的 div 中的每个名称逐一复制到输入字段中

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>

我得到了它，它将在单击按钮时将所有文本从 div 复制到输入，但我想知道是否有一种方法我只能从 div 复制一个名称到输入，如果再次单击按钮，则将下一个名称从 div 复制到输入等等？

Answer 1

您可以跟踪 div 中当前名称的索引(我更改了 div 的内容以考虑应读取的 div 的更改):

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>

确实有进一步简化和优化的空间(通过存储 div 节点本身而不是总是查询内部文本)，但想法是相同的。