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

// Zmienne
var correct = document.getElementsByClassName('correct');
var sum = 0;

// Sumowanie punktów
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>

防止多次单击按钮

2 个答案: