After picking Rock, Paper, or scissors, the computers choices stays the same. I want the computer choice to change after the player makes their choice instead of it just staying at one choice.
For example if the player picks "rock" and the computer picks "scissors", the computers choice would stay at scissors until i refresh the screen.
here is my javascript code:
my code
`//UI
`let userScore = 0;
let compScore = 0;
const userScoreSpan = document.getElementById("userScore");
const compScoreSpan = document.getElementById("compScore");
const rockDiv = document.getElementById("r");
const paperDiv = document.getElementById("p");
const scissorsDiv = document.getElementById("s");
const results = document.getElementById("result");
//UI
rockDiv.addEventListener("click", function () {
play("rock");
});
paperDiv.addEventListener("click", function () {
play("paper");
});
scissorsDiv.addEventListener("click", function () {
play("scissors");
});
// How the game functions
const options = \["rock", "paper", "scissors"\];
const computerSelection = computerPicks();
function computerPicks() {
const choice = options\[Math.floor(Math.random() \* options.length)\];
return choice;
}
function play(playerSelection) {
if (playerSelection == computerSelection) {
results.innerHTML = `Its a tie`;
} else if (
(playerSelection == "rock" && computerSelection == "scissors") ||
(playerSelection == "paper" && computerSelection == "rock") ||
(playerSelection == "scissors" && computerSelection == "paper")
) {
userScore++;
userScoreSpan.innerHTML = userScore;
results.innerHTML = `${playerSelection} beats ${computerSelection}`;
} else {
compScore++;
compScoreSpan.innerHTML = compScore;
results.innerHTML = `${computerSelection} beats ${playerSelection}`;
}
}
