javascript - 计数器仅适用于 jQuery 游戏的第一次点击

Question

我是 js 和 jQuery 的新手。每次赢得比赛时，我都试图让计数器上升。但是计数器只会上升到第一个然后停止。有人告诉我，我需要在回调函数之外声明新的分数。我尝试了两种方法，在 if 语句的函数外部和 else 语句的内部。无论如何，我都会得到相同的结果。希望有人能指出我哪里出错以及如何解决它。

const myApp = {};
// number option callback function
myApp.handleChoiceClick = function() {
  // save selected number from user
  const userNumber = parseInt($(this).val());
  // disable other buttons after choice has been picked
  $('.numberOption').attr('disabled', true);
  // save randomly generate number between zero and five for computer player
  const opponentNumber = Math.floor(Math.random() * 5) + 1;
  // have the chosen number for the user and the computer display on the page with a hand
  const displayHand = function() {
    $(`.evenFinger${userNumber}`).css('z-index', '10');
    $(`.finger${opponentNumber}`).css('z-index', '10');
  };
  displayHand();
  // set score counter to zero
  // compare if even or odd wins by using modulos
  // display "winner"/"lose" on the page if the user wins/loses
  const summedFingers = userNumber + opponentNumber;
  if (summedFingers % 2 === 0) {
    $('.winSum').html(`${summedFingers} fingers`);
    $('.winDeclaration').html('evens wins');
    $(`.playAgain`).css('visibility', 'visible');
    // add score to user
    const userScore = 1;
    myApp.evenScoreUpdate(userScore);
  } else {
    $('.winSum').html(`${summedFingers} fingers`);
    $('.winDeclaration').html('odds wins');
    $(`.playAgain`).css('visibility', 'visible');
    // add score to opponent
    let opponentScore = 0;
    opponentScore += 1;
    $('.oddScore').html(opponentScore);
  }
};
myApp.evenScoreUpdate = function(evenScore) {
  let newscore = 0;
  newscore += evenScore;
  $('.evenScore').html(newscore);
};
// create a play again button the resets the code
myApp.handlePlayAgainClick = function() {
  $('.handReset').css('z-index', '0');
  $('.playAgain').css('visibility', 'hidden');
  $('.winSum').html(' ');
  $('.winDeclaration').html(' ');
  $('.numberOption').attr('disabled', false);
};
// fade in header text on pageload
myApp.headerAnimate = function() {
  $('.hidden').fadeIn(1250).removeClass('hidden');
};
// play again click function
myApp.playAgain = function() {
  $('.playAgain').on('click', myApp.handlePlayAgainClick);
};
// number option click function
myApp.clickNumbers = function() {
  $('.numberOption').on('click', myApp.handleChoiceClick);
};
// initialization
myApp.init = function() {
  myApp.clickNumbers();
  myApp.playAgain();
  myApp.headerAnimate();
};
// pageload
$(function() {
  myApp.init();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scoreCounter">
  <h2>Even</h2>
  <h2 class="evenScore">0</h2>
  <h2>Odd</h2>
  <h2 class="oddScore">0</h2>
</div>
<div class="optionContainer">
  <button class="numberOption" value="1"><img src="./assets/fingerprint1.png" alt="1"></button>
  <button class="numberOption" value="2"><img src="./assets/fingerprint2.png" alt="2"></button></button>
  <button class="numberOption" value="3"><img src="./assets/fingerprint3.png" alt="3"></button></button>
  <button class="numberOption" value="4"><img src="./assets/fingerprint4.png" alt="4"></button></button>
  <button class="numberOption" value="5"><img src="./assets/fingerprint5.png" alt="5"></button></button>
</div>
<div class="victoryStatement">
  <h2 class="winSum"></h2>
  <h2 class="winDeclaration"></h2>
  <button class="playAgain">Play Again</button>
</div>

标签： javascripthtmljquery

Answer 1

定义函数外的分数变量意味着在函数外定义它们：

const myApp = {};
let userScore = 0;
let opponentScore = 0;
...

并且不要在每次myApp.handleChoiceClick调用时重新初始化它们。但是，您最好将这些值添加为myApp对象属性并在init函数中初始化它们：

myApp.init = function() {
  myApp.userScore = 0;
  myApp.opponentScore = 0;
  myApp.clickNumbers();
  myApp.playAgain();
  myApp.headerAnimate();
};

使用++运算符来增加变量/对象属性（没有区别，只是一种更常用的方法）：

if (summedFingers % 2 === 0) {
  ...
  // add score to user
  myApp.userScore ++;
  $('.evenScore').html(myApp.userScore);
} else {
  ...
  // add score to opponent
  myApp.opponentScore ++;
  $('.oddScore').html(myApp.opponentScore);
}

整个代码将是

const myApp = {};
// number option callback function
myApp.handleChoiceClick = function() {
  // save selected number from user
  const userNumber = parseInt($(this).val());
  // disable other buttons after choice has been picked
  $('.numberOption').attr('disabled', true);
  // save randomly generate number between zero and five for computer player
  const opponentNumber = Math.floor(Math.random() * 5) + 1;
  // have the chosen number for the user and the computer display on the page with a hand
  const displayHand = function() {
    $(`.evenFinger${userNumber}`).css('z-index', '10');
    $(`.finger${opponentNumber}`).css('z-index', '10');
  };
  displayHand();
  // set score counter to zero
  // compare if even or odd wins by using modulos
  // display "winner"/"lose" on the page if the user wins/loses
  const summedFingers = userNumber + opponentNumber;
  if (summedFingers % 2 === 0) {
    $('.winSum').html(`${summedFingers} fingers`);
    $('.winDeclaration').html('evens wins');
    $(`.playAgain`).css('visibility', 'visible');
    // add score to user
    myApp.userScore ++;
    $('.evenScore').html(myApp.userScore);
  } else {
    $('.winSum').html(`${summedFingers} fingers`);
    $('.winDeclaration').html('odds wins');
    $(`.playAgain`).css('visibility', 'visible');
    // add score to opponent
    myApp.opponentScore ++;
    $('.oddScore').html(myApp.opponentScore);
  }
};
// create a play again button the resets the code
myApp.handlePlayAgainClick = function() {
  $('.handReset').css('z-index', '0');
  $('.playAgain').css('visibility', 'hidden');
  $('.winSum').html(' ');
  $('.winDeclaration').html(' ');
  $('.numberOption').attr('disabled', false);
};
// fade in header text on pageload
myApp.headerAnimate = function() {
  $('.hidden').fadeIn(1250).removeClass('hidden');
};
// play again click function
myApp.playAgain = function() {
  $('.playAgain').on('click', myApp.handlePlayAgainClick);
};
// number option click function
myApp.clickNumbers = function() {
  $('.numberOption').on('click', myApp.handleChoiceClick);
};
// initialization
myApp.init = function() {
  myApp.userScore = 0;
  myApp.opponentScore = 0;
  myApp.clickNumbers();
  myApp.playAgain();
  myApp.headerAnimate();
};
// pageload
$(function() {
  myApp.init();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scoreCounter">
  <h2>Even</h2>
  <h2 class="evenScore">0</h2>
  <h2>Odd</h2>
  <h2 class="oddScore">0</h2>
</div>
<div class="optionContainer">
  <button class="numberOption" value="1"><img src="./assets/fingerprint1.png" alt="1"></button>
  <button class="numberOption" value="2"><img src="./assets/fingerprint2.png" alt="2"></button></button>
  <button class="numberOption" value="3"><img src="./assets/fingerprint3.png" alt="3"></button></button>
  <button class="numberOption" value="4"><img src="./assets/fingerprint4.png" alt="4"></button></button>
  <button class="numberOption" value="5"><img src="./assets/fingerprint5.png" alt="5"></button></button>
</div>
<div class="victoryStatement">
  <h2 class="winSum"></h2>
  <h2 class="winDeclaration"></h2>
  <button class="playAgain">Play Again</button>
</div>