javascript - 将每个类的 innerHTML 复制到另一个 div

Question

我目前正在努力将类的 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)

}

Answer 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 .你循环了太多次。