Javascript 在存在多个类的位置单击时获取标记的数据键

我想在单击时获取div的innerHTML 其中所有类名都相同

它适用于文本，但在单击S或D时不起作用

<div class="keys">
     <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>

    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>

    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
</div>

---

将

querySelectorAll

改为

querySelector

与

Array.from

方法结合使用

由于

querySelectorAll（）

返回一个节点列表，因此必须为每个项目附加一个

click

事件处理程序

var x=Array.from（document.querySelectorAll（'.key'））.forEach（函数（项）{ item.addEventListener（'单击'，弹出窗口）； }); 功能弹出窗口（e）{ 警报（e.target.innerHTML）； }

A.
鼓掌
s
hihat
D
踢

或者为每个

元素添加一个事件侦听器。key

元素：

document.querySelectorAll（'.key'）.forEach（key=>{
key.addEventListener（'click'，（）=>console.log（key.innerHTML））；
});

A.
鼓掌
s
hihat
D
踢
在阅读答案之前，请先阅读答案，看看是否能找出错误所在。谢谢。querySelector（）仅选择具有相同名称的第一个元素。
var x = document.querySelector('.key');
x.addEventListener('click', popUp);

function popUp(e) {
    alert(e.target.innerHTML);
}