Javascript 单击，触发动画并播放声音。从“向下键”转到“单击”

遵循本drumkit教程，但希望将其更改为可以单击的位置，而不是按键（在本例中，按A键将触发动画和声音）。尝试将窗口中的“向下键”更改为“单击”，但未发生任何操作。我做错了什么

如果需要，可以提供额外的详细信息。有两个功能。第一个播放与数据键div的keycode匹配的相应音频标记。 第二个函数只是将css中的转换返回到其原始状态

功能播放声音（e）{
const audio=document.querySelector（`audio[data key=“${e.keyCode}]”）；
const key=document.querySelector（`.key[data key=“${e.keyCode}]”）；
if（！audio）return；//停止函数一起运行
audio.currentTime=0；//倒带到开始位置
音频播放（）；
key.classList.add（'playing'）；
}
功能移除转换（e）{
if（e.propertyName！=='transform'）返回；//如果不是转换，则跳过它
this.classList.remove（'playing'）；
}
const keys=document.queryselectoral（'.key'）；
key.forEach（key=>key.addEventListener（'transitionend'，removeTransition））；
window.addEventListener（'keydown'，playSound）
@charset“UTF-8”；
/*CSS文档*/
html{
字体大小：10px；
/*背景：url(http://i.imgur.com/b9r5sEL.jpg)底部中心*/
/*背景尺寸：封面*/
}
身体，
html{
保证金：0；
填充：0；
字体系列：无衬线；
}
.钥匙{
显示器：flex；
弹性：1；
最小高度：100vh；
对齐项目：居中；
证明内容：中心；
}
.钥匙{
边缘：.4rem固体薄雾状；
边界半径：.5rem；
保证金：1rem；
字体大小：1.5rem；
填充：1rem.5rem；
过渡：全部.07s缓解；
宽度：10雷姆；
文本对齐：居中；
颜色：白色；
背景：rgba（245245220,0.4）；
文本阴影：0.5rem黑色；
}
.玩{
转换：比例（1.1）；
边框颜色：黑色；
盒影：0.01深黑色；
}

JS鼓套件
您所遇到的问题被放置在错误的属性下，您试图使用该属性从中获取数据。
当您按下键盘上的按钮时，可以使用keyCode属性，但您的目标是从数据键属性获取它。
因此，首先你必须改变：

e.keyCode

到

像这样：

const audio = document.querySelector(`audio[data-key="${e.target.dataset.key}"]`);
const key = document.querySelector(`.key[data-key="${e.target.dataset.key}"]`);

另外，您需要添加侦听器，该侦听器不是在窗口对象上单击，而是在某些html元素上单击。例如，可以使用相同的forEach循环

const audio = document.querySelector(`audio[data-key="${e.target.dataset.key}"]`);
const key = document.querySelector(`.key[data-key="${e.target.dataset.key}"]`);

keys.forEach((key) => {
    key.addEventListener('transitionend', removeTransition);
    key.addEventListener('click', playSound);
});