Prevent multiple clicks on button

Question

I've a small quiz which has 3 questions. I want to count points if user clicks correct answer. I made it but it counts me all clicks (even the user clicks many times on the same answer). How to prevent it?

<section> <p>Lorem Ipsum1</p> <button class="answer">14</button> <button class="answer">18</button> <button class="answer correct">23</button> <br /> <br /> <p>Lorem Ipsum2</p> <button class="answer">Kalisz</button> <button class="answer correct">Poznań</button> <button class="answer">Łódź</button> <br /> <br /> <p>Lorem Ipsum3</p> <button class="answer correct">Paulina</button> <button class="answer">Wanda</button> <button class="answer">Ania</button> <br /> </section>

JS

// Variables var correct = document.getElementsByClassName('correct'); var sum = 0; // Points sum for(var i=0; i < correct.length; i++) correct[i].addEventListener( 'click', function(){ sum +=1; });

Either disable the button on click, or set a flag if it has already been clicked and only count if not — baao
– baao, Commented Jun 30, 2018 at 21:32
It's also not correct as it would disable all .correct buttons @Abdenn0ur — baao
– baao, Commented Jun 30, 2018 at 21:37

Meliodas · Accepted Answer · 2018-06-30 21:45:35Z

Just change your javascript code to this:

// Zmienne var correct = document.getElementsByClassName('correct'); var sum = 0; function increaseScore() { sum +=1; console.log(sum); this.removeEventListener('click', increaseScore); } // Sumowanie punktów for(var i=0; i < correct.length; i++) correct[i].addEventListener( 'click', increaseScore);

This increases the sum on the first click, and removes event listener for the button clicked afterwards, so the sum will be increased only once.

Victor Perez · Accepted Answer · 2018-06-30 21:55:05Z

Just remove the click handler after the first click

// Zmienne var correct = document.getElementsByClassName("correct"); var sum = 0; function updateCountDisplay () { document.getElementById('count').innerText = sum } function handleClick(elm) { elm.addEventListener("click", function handler() { elm.removeEventListener("click", handler); sum++; updateCountDisplay() }); } updateCountDisplay(); // Sumowanie punktów for (var i = 0; i < correct.length; i++) { handleClick(correct[i]); }

<section> <p>Lorem Ipsum1</p> <button class="answer">14</button> <button class="answer">18</button> <button class="answer correct">23</button> <br /> <br /> <p>Lorem Ipsum2</p> <button class="answer">Kalisz</button> <button class="answer correct">Poznań</button> <button class="answer">Łódź</button> <br /> <br /> <p>Lorem Ipsum3</p> <button class="answer correct">Paulina</button> <button class="answer">Wanda</button> <button class="answer">Ania</button> <br /> </section> <div> correct count <span id="count"></span> </div>

Collectives™ on Stack Overflow

Prevent multiple clicks on button

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related