addEventListener到数组中的元素未在文本字段中设置期望值-Javascript [duplicate]

Question

此问题已经在这里有了答案：

• JavaScript closure inside loops – simple practical example44个答案

我一直在尝试为HTML文件中的表情符号创建菜单。我正在从CSV文件导入数据，将其转换为一维数组，并试图在html页面上显示。我能够显示它，但是当我在表格的每个单元格中添加eventListener以显示我在文本字段中单击的表情符号时，它会显示该行的最后一个表情符号

CSV文件包含表情符号的所有Dec值

---

以下是我显示表情符号的代码：

function createEmojiDropdown(table) {
  var i = 0;
  table.forEach(e => {
    var a = 0;
    var row = document.createElement('tr');
    row.id = "e-row"
    while (a < 2) {
      var cols = "&#" + table[i];
      if (table[i] == undefined) {
        return;
      }
      var cell = document.createElement('td');
      cell.id = "e-cell";
      cell.innerHTML = cols;
      // cell.onclick = `click_e(${cell.innerHTML})` // I have tried this too but it didn't work
      row.append(cell);
      cell.addEventListener('click', () => {
        document.getElementById('message').value += cell.innerHTML;
      });
      a++;
      i++;
    }
    document.getElementById('emojis').append(row);
  });
}

var data = ["128512", "128514", "129315", "128518"]; //dummy data just for example
createEmojiDropdown(data);

<input type="text" class="message" id="message" placeholder="Type a message" />
<div class="emojis-container">
  <div class="emojitext">Emoji</div>
  <div class="emojis" id="emojis"></div>
</div>

有什么办法吗？谢谢！

Answer 1

[绑定click事件时，您可能希望使用MouseEvent查找触发事件的单元格：

cell.addEventListener('click', event => {
    document.getElementById('message').value += event.target.innerHTML;
});