Question

因此，在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：无法读取未定义的属性“目标” 在musicPlayer（index.js：23）在index.js：20

当我使用这些事件对象的控制台日志时，它表示event.target.id为moonlightButton，因此我假设将其与字符串moonlightButton相等将触发这些事件。还有if语句，但事实并非如此。我已经尝试过使用类名和值了，到目前为止，它们中的任何一个都没有运气。我是Javascript的新手，因此可以提供任何帮助。谢谢。

Answer 1

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

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

1 个答案: