将文本从 div 复制到输入 javascript答案

【问题标题】：copy text from div to input javascript将文本从 div 复制到输入 javascript
【发布时间】：2018-09-28 08:43:24
【问题描述】：

我只是想知道是否可以将具有相同类名的 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 复制到输入等等？

【问题讨论】：

我真的不明白，但是。在每个 div 中，您有 NAME HERE 1，NAME HERE 2。您是否将 name here 1 和 name here 2 视为 2 个用逗号分隔的不同名称？

标签： javascript html

【解决方案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 节点本身而不是总是查询 innerText），但想法是一样的。

【讨论】：

如果在那个 div 中没有名字可以尝试/移动到下一个 div 吗？并感谢您的帮助！

【解决方案2】：

你可以这样做：引入一个计数器变量并在每次点击时增加其值。再次将其值设置为 0 以实现圆形外观，即从最后到第一个

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

【讨论】：

【解决方案3】：

据我了解，您可以获取 div 中的所有文本。
每个 div 都有多个名称。因此，如果您想获取名称列表而不是所有名称作为一个字符串，您需要的是 String.split 方法。这将使您以逗号分隔。

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

这与保留一个计数器变量一起可以让您一一选择名称。
如果您想要的话，还保留一个计数器变量可以让您在每次点击时选择不同的 div。

【讨论】：

【解决方案4】：

您需要保留一个计数器并减少点击次数，当它为零时将其重置为elems长度。

  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>

【讨论】：

【解决方案5】：

如果您的所有姓名都用逗号分隔，那么您可以执行以下操作。如果你愿意，你也可以用空格分隔。如果 div 中有其他内容，比如那些强标签中的内容，事情就会变得有点棘手。

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>

【讨论】：