计数器仅对 jQuery 游戏的第一次点击有效

Question

I'm new to js and jQuery. I am trying to make a counter go up every time a game is won. But the counter only ever gets up to the number one and then stops. Someone told me that I need to declare the new score outside of the callback function. I tried both ways, outside the function on the if statement and inside on the else statement. I am getting the same result regardless. Was hoping some one can point out where I'm going wrong and how to fix it.

 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>

Answer 1

Define the score variables outside the function meaning to define them outside the function:

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

and do not reinitialize them on every myApp.handleChoiceClick call. However you'd better add those values as myApp object properties and initialize them within the init function:

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

Use the ++ operator to increment the variable / object property (makes no difference, just a more usual way to do it):

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

The whole code will be the

 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>