Question

var p1Button = document.querySelector("#p1");
var p2Button = document.getElementById("p2");
var p1Display = document.querySelector("#p1Display");
var p2Display = document.querySelector("#p2Display");

var p1Score = 0;
var p2Score = 0;

var gameOver = false;

var winningScore = 5;

p1Button.addEventListener("click", function(){
  if(!gameOver){
  p1Score++;
  if (p1Score === winningScore)
    p1Display.classList.add("winner");
    gameOver = true;
  }
  p1Display.textContent = p1Score;

});

p2Button.addEventListener("click", function(){
  if(!gameOver){
  p2Score++;
  if (p2Score === winningScore)
    p2Display.classList.add("winner");
    gameOver = true;
  }

  p2Display.textContent = p2Score;

});

.winner {
  color: green;
}

<h1><span id = "p1Display">0</span> to <span id = "p2Display">0</span></h1>
<p>Playing to: 5</p>
<input type="number">
<button id="p1" type="button">Player One</button> 
<button id="p2" type="button">Player Two</button> 
<button id="reset" type="button">Reset</button>

我的两个函数中的p2Display.classList.add("winner");行使我的代码无法正常工作。

如果将其删除，则代码可以正常工作。

但是，我需要该行代码才能完成游戏。

有没有理由阻止我的游戏正常运行？

我似乎无法弄清楚。

Answer 1

您缺少if块中语句前后的左括号和右括号：

if (p1Score === winningScore)
    p1Display.classList.add("winner");
    gameOver = true;

因此，仅将第一条语句视为if块的一部分，而无论执行第二条语句gameOver = true;。结果，游戏结束了第一次点击事件。

以下是更新的代码段，其中在if块周围添加了左括号和右括号：

var p1Button = document.querySelector("#p1");
var p2Button = document.getElementById("p2");
var p1Display = document.querySelector("#p1Display");
var p2Display = document.querySelector("#p2Display");

var p1Score = 0;
var p2Score = 0;

var gameOver = false;

var winningScore = 5;

p1Button.addEventListener("click", function() {
  if (!gameOver) {
    p1Score++;
    if (p1Score === winningScore)
    {
      p1Display.classList.add("winner");
      gameOver = true;
    }
  }
  p1Display.textContent = p1Score;

});

p2Button.addEventListener("click", function() {
  if (!gameOver) {
    p2Score++;
    if (p2Score === winningScore)
    {
      p2Display.classList.add("winner");
      gameOver = true;
    }
  }

  p2Display.textContent = p2Score;

});

.winner {
  color: green;
}

<head>
  <title>Score Keeper</title>
  <link rel="stylesheet" type="text/css" href="scoreKeeper.css">
</head>

<body>
  <h1><span id="p1Display">0</span> to <span id="p2Display">0</span></h1>
  <p>Playing to: 5</p>
  <input type="number">
  <button id="p1" type="button">Player One</button>
  <button id="p2" type="button">Player Two</button>
  <button id="reset" type="button">Reset</button>
  <script type="text/javascript" src="scoreKeeper.js"></script>
</body>

Answer 2

你弄乱了花括号。

您需要在此处删除左花括号：if（！gameOver）{

，您需要添加大括号：if（p2Score === winningScore）（在两个事件侦听器中）

p2Button.addEventListener("click", function(){
if(!gameOver)
    p2Score++;

if (p2Score === winningScore){
    p2Display.classList.add("winner");
    gameOver = true;
}

p2Display.textContent = p2Score;})

否则，您的行的执行顺序就会混乱

classList.add已停止我的代码运行。我不知道为什么。你是否可以？

2 个答案: