Question

我目前正在努力将类的innerHTML部分复制到另一个div。问题是我为每个div使用相同的类名，但每个div都有另一个内容。我想基于EventListener实现它，将clicked div的innerHTML复制到另一个div。所以我基本上想要如果有人点击div.emoji中的表情符号 - 选择相同的表情符号被复制到div＃text中。使用我当前的JavaScript代码，我的innerHTML最终定义为未定义。我目前正在尝试保存每个div.emoji的每个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。你循环了太多次了。

Answer 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>

将每个类的innerHTML复制到antoher div

2 个答案: