防止多次点击按钮

Question

我有一个小测验，有 3 个问题。 如果用户点击正确答案，我想计算积分。 我做到了，但它计算了我所有的点击次数（即使用户在同一个答案上多次点击）。 如何预防？

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

Answer 1

只需将您的 javascript 代码更改为：

// 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);

这会增加第一次点击的总和，并删除之后点击按钮的事件监听器，所以总和只会增加一次。

Answer 2

只需在第一次点击后删除点击处理程序

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