CODEWITHSUNDEEP
javascriptfunctionevents
sgt_pepper85
sgt_pepper85

Reputation: 441

How can I call a function multiple times from different buttons?

I am building a quiz page using javascript, and want the user to select from a multiple choice and then hit 'Go' to check their answer. Here is the html for the first question:

<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>

I have created a function which is called by the Go button which informs the user if they are right or not. Here is the 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>';
    }
}

This code works the way I want it to but only for the first question. When I try to call the function again by clicking 'Go' on question 2 nothing happens.

Is there a way to call a function multiple times using different buttons?

Upvotes: 0

Views: 70

Answers (2)

sgt_pepper85
sgt_pepper85

Reputation: 441

Thanks to those who helped. I have solved my issue now using jquery. This was the code I used:

$(".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>');
    }
});

Upvotes: 0

F&#233;lix Paradis
F&#233;lix Paradis

Reputation: 6031

document.querySelector('.go'); only selects the first matching element.

To select all elements with the .go class you need to use querySelectorAll

Then you'll need to assign your event listener to all elements returned.

Here is a minimal example:

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>

Upvotes: 1

Related Questions