Как я могу вызвать функцию несколько раз с разных кнопок?

Question

Я создаю страницу викторины, используя javascript, и хочу, чтобы пользователь выбрал один из нескольких вариантов, а затем нажал 'Go', чтобы проверить свой ответ. Вот html для первого вопроса:

<p class="question">What is the name of Joey's bedtime penguin pal?</p>
<div class="radio">
<div>
    <input type="radio" class="wrong" name="q1">Maurice
</div>
<div>
    <input type="radio" class="wrong" name="q1">Clunkers
</div>
<div>
    <input type="radio" class="right" name="q1">Hugsy
</div>
<div class="button">
    <button type="button" class="go">Go</button>
</div>
<div>
    <img src="images/hugsy.jpg" class="image" style="display: none;"
</div>

Я создал функцию, которая вызывается кнопкой Go, которая информирует пользователя, правы они или нет. Вот код javascript:

let go = document.querySelector('.go');
let correct = document.querySelector('.right');
let showPic = document.querySelector('img');
let remGo = document.querySelector('button');
let choices = document.querySelector('.radio');
let score = 0;

go.addEventListener('click', checkAnswer);

function checkAnswer() {
    if (correct.checked) {
        showPic.classList.remove('image');
        remGo.remove();
        choices.innerHTML = '<h2 style="color: green;">Correct!</h2>';
        score++;
    } else {
        remGo.remove();
        choices.innerHTML = '<h2 style="color: red;">Incorrect</h2>';
    }
}

Этот код работает так, как я хочу, но только для первого вопроса. Когда я пытаюсь вызвать функцию снова, нажав «Go» в вопросе 2., ничего не происходит.

Есть ли способ вызвать функцию несколько раз, используя разные кнопки?

Answer 1

document.querySelector('.go'); выбирает только первый соответствующий элемент.

Чтобы выбрать все элементы с классом .go, вам нужно использовать querySelectorAll

Затем вам нужно будет назначить свой элемент. прослушиватель событий для всех возвращаемых элементов.

Вот минимальный пример:

let buttons = document.querySelectorAll('.go');

for (const button of buttons) {
  button.addEventListener('click', checkAnswer);
}


function checkAnswer() {
    console.log("checkingAnswer...")
}

<div class="button">
    <button type="button" class="go">Go</button>
</div>

<div class="button">
    <button type="button" class="go">Go</button>
</div>

<div class="button">
    <button type="button" class="go">Go</button>
</div>

Answer 2

Спасибо тем, кто помог. Я решил свою проблему сейчас, используя jquery. Это был код, который я использовал:

$(".container").on("click", "button", function (e) {

    var container = $(e.target).closest(".container");

    if ($(container).find("input:checked").hasClass("right")) {
        $(container).find("img").show();
        $(container).find("button").remove();
        $(container).find(".radio").html('<h2 style="color: green;">Correct!</h2>');
        score++;
    } else {
        $(container).find(".radio").html('<h2 style="color: red;">Incorrect</h2>');
    }
});