无法在javascript中获取event.target.id匹配

Posted 2021-05-03

所以我有三个嵌套在buttons变量中的按钮，如果单击嵌套元素中的按钮，它们都应该播放某首歌曲。检查按下哪些按钮的代码是：

//buttons variable that the three button elements are nested in
const buttons = document.getElementById('music-choice');

//the buttons themselves
const canonButton = document.getElementById('canonButton');
const moonlightButton = document.getElementById('moonlightButton');
const _40thButton = document.getElementById('40thButton');

//variables connected to the audio elements
const canonMusic = document.querySelector('audio[id="canon"]')
const moonlightMusic = document.querySelector('audio[id="moonlight"]')
const _40thMusic = document.querySelector('audio[id="40th"]')

buttons.addEventListener('click', musicPlayer(event)); //this is js.20

function musicPlayer(event) {
    if (event.target.id === 'moonlightButton') { //this is js.23
        moonlightMusic.play();
    }
    else if (event.target.id === 'canonButton') {
        canonMusic.play();
    }
    else if (event.target.id === '40thButton') {
        _40thMusic.play();
    }
}

但是，每次我尝试运行此代码时，我都会在控制台中收到此错误消息：

未捕获的TypeError：无法在index.js读取musicPlayer（index.js：23）中未定义的属性'target'：20

当我使用这些事件对象的控制台日志时，它说event.target.id是moonlightButton，所以我认为让它等于字符串moonlightButton会触发那些if和else if语句但是不是这样的。我已经尝试了类名和值，并且到目前为止没有任何运气。我是javascript的新手所以任何帮助将不胜感激。谢谢。

答案

正如vlaz指出的那样，我试图将一个不存在的参数传递给我的事件监听器。