не могу получить event.target.id для сопоставления в JavaScript

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();
    }
}

Однако каждый раз, когда я пытаюсь запустить этот код, я получаю сообщение об ошибке в консоли:

Uncaught TypeError: Невозможно прочитать свойство 'target' из неопределенного на musicPlayer (index.js: 23) в index.js: 20

Когда я использую консольный журнал этих объектов событий, он говорит, что event.target.id равен moonlightButton, поэтому я предположил бы, что его значение, равное строке moonlightButton, вызовет операторы if и else if но это не так. Я пробовал это с именами классов и значениями, и пока мне не повезло ни с одним из них. Я новичок в Javascript, поэтому любая помощь будет оценена. Спасибо.

Answer 1

Как указал влаз, я пытался передать несуществующий параметр моему слушателю событий.