I am a beginner in JavaScript and writing the classic Rock Paper Scissors game and having one issue at the moment. The scores don't seem to update the first time both the player and computer win. Only the second time the player and computer win does the score add a point to the scoreboard. In other words, the points of either the computer or player are always 1 point behind. Appreciate the help in understanding why this is happening.
Here is my JS/HTML code:
const totalChoices = ["rock", "paper", "scissors"];
let rock_button = document.getElementById("rock");
let paper_button = document.getElementById("paper");
let scissors_button = document.getElementById("scissors");
let resultNarrative = document.getElementById("resultNarrative");
let userScorePath = document.getElementById("playerScore");
let computerScorePath = document.getElementById("computerScore");
let playerScore = 0;
let computerScore = 0;
const compareChoices = (player) => {
let randomNum = Math.floor(Math.random() * 3);
let computerChoice = totalChoices[randomNum];
console.log(computerChoice);
console.log(player);
if (computerChoice === totalChoices[0]) {
if (player === totalChoices[1]) {
narrative(`The Player wins! The computer chose ${totalChoices[0]}
and the player chose ${totalChoices[1]}`);
playerPoint(playerScore++);
console.log(playerScore);
} else if (player === totalChoices[2]) {
narrative(`The computer wins! The computer chose
${totalChoices[0]} and the player chose ${totalChoices[2]}`);
computerPoint(computerScore++);
console.log(computerScore);
}
}
if (computerChoice === totalChoices[1]) {
if (player === totalChoices[2]) {
narrative(`The Player wins! The computer chose ${totalChoices[1]}
and the player chose ${totalChoices[2]}`);
playerPoint(playerScore++);
console.log(playerScore);
} else if (player === totalChoices[0]) {
narrative(`The computer wins! The computer chose ${totalChoices[1]} and the player chose ${totalChoices[0]}`);
computerPoint(computerScore++);
console.log(computerScore);
}
}
if (computerChoice === totalChoices[2]) {
if (player === totalChoices[0]) {
narrative(`The Player wins! The computer chose
${totalChoices[2]} and the player chose ${totalChoices[0]}`);
playerPoint(playerScore++);
console.log(playerScore);
} else if (player === totalChoices[1]) {
narrative(`The computer wins! The computer chose
${totalChoices[2]} and the player chose ${totalChoices[1]}`);
computerPoint(computerScore++);
console.log(computerScore);
}
}
if (computerChoice === player) {
narrative(`There is a tie! The computer chose ${computerChoice}
and the player chose ${player}`);
}
};
function main() {
rock_button.addEventListener("click", function () {
player = compareChoices("rock");
console.log("you chose Rock");
});
paper_button.addEventListener("click", function () {
player = compareChoices("paper");
console.log("you chose Paper");
});
scissors_button.addEventListener("click", function () {
player = compareChoices("scissors");
console.log("you chose Scissors");
});
}
main();
function playerPoint(point) {
userScorePath.innerHTML = point;
console.log(point);
}
function computerPoint(point) {
computerScorePath.innerHTML = point;
console.log(point);
}
let narrative = (result) => {
resultNarrative.innerHTML = result;
};
document.getElementById("rockPic").addEventListener("click", function () {
console.log("You chose the rock image");
});
document.getElementById("paperPic").addEventListener("click", function () {
console.log("You chose the paper image");
});
document.getElementById("scissorsPic").addEventListener("click", function () {
console.log("You chose the scissors image");
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="RPS_Style.css">
<title>Rock Paper Scissor Game</title>
<h1>Welcome to the Classic Game of Rock Paper Scissors</h1>
</head>
<body>
<div class="scoreboard">
<span class = "score" id="playerScoreLabel">Player Score</span> :
<span id="playerScore">0</span>
<br>
<span class = "score" id="computerScoreLabel">Computer
Score</span> : <span id="computerScore">0</span>
</div>
<h2>Ready to Test Your Luck? Choose an option below!</h2>
<div class="choices">
<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>
<div class="images">
<img src="Rock Image.png" id = "rockPic" alt="picture of
rock"/>
<img src="Paper Image.png" id = "paperPic" alt="picture of
paper"/>
<img src="Scissors Image.png" id = "scissorsPic" alt="picture
of scissors"/>
</div>
<p id="resultNarrative">The player chose rock and the computer
chose scissors. Player wins!</p>
</div>
<script src="AppRockPaperScissor.js"></script>
</body>
</html>
