如果/ else语句没有正确执行事件监听器内部;使用Javascript

时间:2018-01-09 12:05:54

标签: javascript function if-statement addeventlistener

这里的目标是拥有一名得分手。每次单击与某个玩家相关的按钮时,他们的分数都会增加一个。一旦其中一个玩家达到指定的获胜分数,您就不能再添加到分数中。我的问题是为什么这段代码不起作用,逻辑在我脑海中有意义,我想理解为什么它不会给我警报以及为什么你可以继续添加每个分数。我已找到一种方法使其工作但仍然相信这应该能够正确执行。谢谢你帮助我!

var p1Button = document.querySelector("#p1");
var p2Button = document.getElementById("p2");
var p1Display = document.getElementById("p1Display");
var p2Display = document.getElementById("p2Display");
var p1Score = 0;
var p2Score = 0;
var winningScore = 5;


if(p1Score !== winningScore && p2Score !== winningScore){
p1Button.addEventListener("click", function(){
  p1Score++;
  p1Display.textContent = p1Score;
  return p1Score;
});
p2Button.addEventListener("click", function(){
  p2Score++;
  p2Display.textContent = p2Score;
  return p2Score;
});
}
else {
  alert("game over");
}

1 个答案:

答案 0 :(得分:1)

检查此https://jsfiddle.net/zcuuwsqo/3/

在你的代码中,if(p1Score !== winningScore && p2Score !== winningScore){只会运行一次,在执行开始时,它不会在每次点击时被触发

你可以有这样的东西

function checkScores() {
  if(p1Score === winningScore || p2Score === winningScore){
    alert("game over");
    p1Button.removeEventListener("click", clickListener);
    p2Button.removeEventListener("click", clickListener);
  }
}

function clickListener(e) {
    if(e.target.id === 'p1')
        p1Display.textContent = ++p1Score;
     else
        p2Display.textContent = ++p2Score;

    checkScores();
    return score;
}

p1Button.addEventListener("click", clickListener);
p2Button.addEventListener("click", clickListener);