Итак, у меня есть три кнопки, вложенные в переменную 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();
}
}
Однако каждый раз, когда я пытаюсь запустить этот код, я получаю сообщение об ошибке в консоли:
Uncaught TypeError: Невозможно прочитать свойство 'target' из неопределенного
на musicPlayer (index.js: 23)
в index.js: 20
Когда я использую консольный журнал этих объектов событий, он говорит, что event.target.id равен moonlightButton
, поэтому я предположил бы, что его значение, равное строке moonlightButton
, вызовет операторы if и else if но это не так. Я пробовал это с именами классов и значениями, и пока мне не повезло ни с одним из них. Я новичок в Javascript, поэтому любая помощь будет оценена. Спасибо.