I am trying to create a rock paper scissors game that plays for 5 rounds and updates the score after a round is played. The errors shows that each time I click the button random numbers are generated for the score.
let player;
let computer;
let result;
let playerScore = 0;
let computerScore = 0;
let tieScore = 0;
const playerText = document.querySelector("#playerText");
const computerText = document.querySelector("#computerText");
const resultText = document.querySelector("#resultText");
const choiceBtns = document.querySelectorAll(".choiceBtns");
const playerScoreText = document.querySelector(".playerScoreText");
const computerScoreText = document.querySelector(".computerScoreText");
const tieScoreText = document.querySelector(".tieScoreText");
for (let i = 0; i < 5; i++) {
choiceBtns.forEach((button) =>
button.addEventListener("click", () => {
player = button.textContent;
computerChoice();
playerText.textContent = `Player: ${player}`;
computerText.textContent = `Computer: ${computer}`;
resultText.textContent = winner();
scoreTracker();
playerScoreText.textContent = `Player Score: ${playerScore}`;
computerScoreText.textContent = `Computer Score: ${computerScore}`;
tieScoreText.textContent = `Tie Score: ${tieScore}`;
})
);
}
function computerChoice() {
const randNum = Math.floor(Math.random() * 3) + 1;
switch (randNum) {
case 1:
computer = "Rock";
break;
case 2:
computer = "Paper";
break;
case 3:
computer = "Scissors";
break;
}
}
function winner() {
if (player == computer) {
return "Tie!";
} else if (
(player == "Rock" && computer == "Scissors") ||
(player == "Paper" && computer == "Rock") ||
(player == "Scissors" && computer == "Paper")
) {
return "Player Wins!";
} else {
return "Computer Wins!";
}
}
function scoreTracker() {
if (winner() === "Tie!") {
tieScore += 1;
} else if (winner() === "Player Wins!") {
playerScore += 1;
} else if (winner() === "Computer Wins!") {
computerScore += 1;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1 class="gameText" id="playerText">Player:</h1>
<h1 class="gameText" id="computerText">Computer:</h1>
<h1 class="gameText" id="resultText">Result:</h1>
<button class="choiceBtns">Rock</button>
<button class="choiceBtns">Paper</button>
<button class="choiceBtns">Scissors</button>
<h3 class="playerScoreText">Player Score:</h3>
<h3 class="computerScoreText">Computer Score:</h3>
<h3 class="tieScoreText">Tie</h3>
</div>
<script src="script.js"></script>
</body>
</html>