将每个类的 innerHTML 复制到另一个 div答案

【问题标题】：Copying innerHTML of each class to antoher div将每个类的 innerHTML 复制到另一个 div
【发布时间】：2017-03-22 02:29:54
【问题描述】：

我目前正在努力将类的 innerHTML 部分复制到另一个 div。问题是我为每个 div 使用相同的类名，但每个 div 都有另一个内容。我想基于 EventListener 来实现，单击的 div 的 innerHTML 被复制到另一个 div。所以我基本上希望如果有人点击 div.emoji 中的表情符号 - 选择相同的表情符号被复制到 div#text 中。使用我当前的 JavaScript 代码，我的 innerHTML 最终是未定义的。我目前正在尝试将每个 div.emoji--select 的每个 innerHTML 保存到一个数组中，然后在我的函数 addEmoji() 中使用它。我非常感谢您的帮助。请仅使用纯 JavaScript。

我的 HTML

<div id="text_wrapper">
  <div id="text" contentEditable="true" hidefocus="true"></div>

</div>


<span class="emoji--select" >????</span>
<span class="emoji--select">????</span>

我的 JavaScript

//Select clicked emoji in div.emoji--select
var emojiText = []

var emojiSelect = document.getElementsByClassName('emoji--select')
for (var i = 0; i <= emojiSelect.length; i++) {
  emojiText.push(emojiSelect[i].innerHTML)

  emojiSelect[i].addEventListener('click', function() {
    addEmoji(emojiText[i])
  })
}


//Add Emoji to div#text
function addEmoji(emojiSelected) {
  var text = document.getElementById('text')
  text.append(emojiSelected)

}

【问题讨论】：

你的分号在哪里？这可能会导致问题，但也可能只是复制代码时的格式问题。
尝试使用text.text(text.text() + emojiSelected) 代替.append （在语法上大笑。也许考虑重命名文本变量。）
您好 zbkrt，您看到我的回答了吗？我认为这非常干净和简单，因为没有使用 IIFE（立即调用函数表达式）。

标签： javascript html

【解决方案1】：

您遇到的问题是上下文之一。当前代码的执行方式是 i 存在于匿名事件处理程序的循环的父范围内。处理事件时，处理程序会查看最接近的 i 定义，循环完成后为 2。

要解决范围问题，您应该使用自调用函数为 i 创建一个新的 shell。

for (var i = 0, len = emojiSelect.length; i < len; i++) {
  emojiText.push(emojiSelect[i].innerHTML);
  (function(i) {
      emojiSelect[i].addEventListener('click', function() {
        addEmoji(emojiText[i]);
      });
  })(i);
}

还请注意，我更改了循环定义以存储数组长度并迭代 i < len 而不是 i <= len。您循环播放了太多次。

【讨论】：

感谢您的解释！但是不知何故，我不得不在函数（i）下面移动！但现在可以了！

【解决方案2】：

尝试以下方法：

var emojiText = []

var emojiSelect = document.getElementsByClassName('emoji--select');
for (var i = 0; i < emojiSelect.length; i++) {
  emojiText.push(emojiSelect[i].outerHTML)
  emojiSelect[i].addEventListener('click', function() {
    addEmoji(this);
  })
}

function addEmoji(emojiSelected) {
  var elem = emojiSelected.cloneNode(true)
  text.append(elem);
}

<div id="text_wrapper">
   <div id="text" contentEditable="true" hidefocus="true">              </div>
</div>
<span class="emoji--select" >?</span>
<span class="emoji--select">?</span>

【讨论】：