I’m a beginner and want to program rock, paper, scissor. Please excuse if my style of asking or and coding may be not on a high level yet.
Meanwhile, the comparison function playRound get the playerSelection (as per his clicked button), but the needed value from computerSelection returns always the same value. Always means after each time, the user clicked any button. When the user refresh the browser, random will be another value. I also tried to migrate the function computerPlay into the function playRound, which wasn’t helping at all. Can someone give me a hint? THANKS!
<body>
<div class="buttons">
<button class="button" value="rock">Rock</button>
<button class="button" value="paper">Paper</button>
<button class="button" value="scissors">Scissor</button>
</div>
<script>
var buttons = document.getElementsByClassName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function (e) {
playerSelection = e.target.value;
playRound(playerSelection);
});
};
function computerPlay(){
const shapes = ['rock', 'paper', 'scissors'];
const random = Math.floor(Math.random() * shapes.length);
return(shapes[random]);
};
let computerSelection = computerPlay();
function playRound (playerSelection){
if (playerSelection === computerSelection){
console.log("Tie! Repeat to break the tie");
}else if (playerSelection === 'rock' && computerSelection === 'paper'){
console.log("You Lose! Paper beats Rock");
}else if (playerSelection === 'rock' && computerSelection === 'scissors'){
console.log("You Win! Rock beats Scissors");
}else if (playerSelection === 'paper' && computerSelection === 'rock'){
console.log("You Win! Paper beats Rock");
}else if (playerSelection === 'paper' && computerSelection === 'scissors'){
console.log("You Lose! Scissors beats Paper");
}else if (playerSelection === 'scissors' && computerSelection === 'rock'){
console.log("You Lose! Rock beats Scissors");
}else if (playerSelection === 'scissors' && computerSelection === 'paper'){
console.log("You Win! Scissors beats Paper");
}else{
console.log("Invalid input! Please try again");
}
};
</script>
</body>