Проблемы с тестом с несколькими вариантами ответов

Question

Возникли проблемы с приведенным ниже кодом. Когда пользователь нажимает кнопку, я хочу соответственно установить значение clickedAnswer. Затем я могу проверить нажатие кнопки на ответе позже. В настоящее время я регистрирую 4 каждый раз. Любая помощь приветствуется!

let clickedAnswer = 1;
           
function setClickedAnswer(button) {
    if (button.id === "option1") {
        clickedAnswer = 1;
    } else if (button.id === "option2") {
        clickedAnswer = 2;
    } else if (button.id === "option3") {
        clickedAnswer = 3;
    } else {
        clickedAnswer = 4;
    }
    validateAnswer();
    console.log(clickedAnswer);
}

answer1.addEventListener("click", setClickedAnswer);
answer2.addEventListener("click", setClickedAnswer);
answer3.addEventListener("click", setClickedAnswer);
answer4.addEventListener("click", setClickedAnswer);

Answer 1

Функция ожидает передачи самой кнопки:

function setClickedAnswer(button) {

Однако такая кнопка не передается:

answer1.addEventListener("click", setClickedAnswer);

Что это отправлено обработчиком событий по умолчанию является сам объект события , который имеет свойство target, относящееся к элементу, вызывающему событие. Итак, вы можете сделать это:

if (button.target.id === "option1") {

(повторить, конечно, для других условий)

В качестве альтернативы, если вы предпочитаете, чтобы функция ожидала элемент кнопки, вы можете обернуть функцию вокруг вызова обработчика событий и передать туда элемент:

answer1.addEventListener("click", () => setClickedAnswer(answer1));

или:

answer1.addEventListener("click", function () { setClickedAnswer(answer1); });