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>