We Keep Coding

How can I fix this rock, paper, scissor game in JavaScript?

The first function getComputerChoice() returns a random - rock, paper, or scissor. However, in the playRound function when the computer' choice and user's choice are compared, it shows incorrect answers for a few of them. For example, when I choose rock and computer chooses paper, I win, which is wrong.
I tried using if else and switch statements but faced the same problem. It would be great if someone could help me out.
let computerSelection = getComputerChoice();
let playerSelection = prompt("rock, paper, or scissor?").toLowerCase();
function getComputerChoice(){
const randomNumber = Math.floor(Math.random()*3);
if(randomNumber === 0){
choice = "rock";
} else if(randomNumber === 1){
choice = "paper";
} else if(randomNumber === 2){
choice = "scissor";
} return choice;
}
function playRound(playerSelection, computerSelection){
let result = '';
if(computerSelection === playerSelection){
result = "It's a tie";
} else if(computerSelection === 'paper' && playerSelection === 'rock'){
result = "you lose";
} else if(computerSelection === 'scissor' && playerSelection === 'rock'){
result = "you win";
} else if ((computerSelection === 'rock') && (playerSelection === 'paper')){
result = "You win";
} else if((computerSelection === 'scissor') && (playerSelection === 'paper')){
result = "you lose";
} else if ((computerSelection === 'paper') && (playerSelection === 'scissor') ){
result = "You win";
} else if((computerSelection === 'rock') && (playerSelection === 'scissor')){
result = "You lose";
}
return result;
};
alert("The computer chose: " + getComputerChoice());
alert("That means " + playRound(playerSelection, computerSelection));

In your first statement, you choose the computer selection. But in your second to last statement, you call getComputerChoice() which makes a DIFFERENT selection. Change the next to the last line to
alert("The computer chose: " + computerSelection);

Try adding this debug line that I have put in, and then look at the console in the browser. You will see what the computer really chose
function getComputerChoice(){
const randomNumber = Math.floor(Math.random()*3);
if(randomNumber === 0){
choice = "rock";
} else if(randomNumber === 1){
choice = "paper";
} else if(randomNumber === 2){
choice = "scissor";
}
// debug line
console.log('randomly chose', choice);
return choice;
}

ChatGPT?
This code will run but it has a couple of problems:
In the getComputerChoice function, the variable choice is declared without const, let, or var. This means that it's a global variable and could cause issues in the future.
The line alert("The computer chose: " + getComputerChoice()); is calling the getComputerChoice function twice, but it should only be called once and stored in the computerSelection variable.
The result of the playRound function is not being logged to the console or displayed in any other way, it's only being returned.
To resolve these problems, you could modify the code as follows:
let computerSelection = getComputerChoice();
let playerSelection = prompt("rock, paper, or scissor?").toLowerCase();
function getComputerChoice(){
let choice = '';
const randomNumber = Math.floor(Math.random() * 3);
if(randomNumber === 0){
choice = "rock";
} else if(randomNumber === 1){
choice = "paper";
} else if(randomNumber === 2){
choice = "scissor";
}
return choice;
}
function playRound(playerSelection, computerSelection){
let result = '';
if(computerSelection === playerSelection){
result = "It's a tie";
} else if(computerSelection === 'paper' && playerSelection === 'rock'){
result = "you lose";
} else if(computerSelection === 'scissor' && playerSelection === 'rock'){
result = "you win";
} else if ((computerSelection === 'rock') && (playerSelection === 'paper')){
result = "You win";
} else if((computerSelection === 'scissor') && (playerSelection === 'paper')){
result = "you lose";
} else if ((computerSelection === 'paper') && (playerSelection === 'scissor') ){
result = "You win";
} else if((computerSelection === 'rock') && (playerSelection === 'scissor')){
result = "You lose";
}
return result;
};
console.log("The computer chose: " + computerSelection);
console.log("That means " + playRound(playerSelection, computerSelection));

Your Code is not consistent : here is the answer:
let computerSelection = getComputerChoice();
let playerSelection = prompt("rock, paper, or scissor?").toLowerCase();
function getComputerChoice(){
const randomNumber = Math.floor(Math.random() * 3);
let choice;
if(randomNumber === 0){
choice = "rock";
} else if(randomNumber === 1){
choice = "paper";
} else if(randomNumber === 2){
choice = "scissors";
}
return choice;
}
function playRound(playerSelection, computerSelection){
let result = '';
if(computerSelection === playerSelection){
result = "It's a tie";
} else if(computerSelection === 'paper' && playerSelection === 'rock'){
result = "You lose";
} else if(computerSelection === 'scissors' && playerSelection === 'rock'){
result = "You win";
} else if ((computerSelection === 'rock') && (playerSelection === 'paper')){
result = "You win";
} else if((computerSelection === 'scissors') && (playerSelection === 'paper')){
result = "You lose";
} else if ((computerSelection === 'paper') && (playerSelection === 'scissors') ){
result = "You lose";
} else if((computerSelection === 'rock') && (playerSelection === 'scissors')){
result = "You win";
}
return result;
};
let result = playRound(playerSelection, computerSelection);
alert("The computer chose: " + computerSelection);
alert("That means " + result);
Note:
scissor has been corrected to scissors.
Consistent use of capitalization for "You win" and "You lose".
The result ofplayRound() function has been stored in a variable
result before using it in the alert
.

I am unable to pass my button's event into my function's parameter

I am trying to make a simple rock paper scissors game and so far I've written this much code but I'm not sure how to get the value of my buttons (rock, paper, scissors) to pass through my function parameters.
I have identified the values in javascript using an array but also in html using "value =" inside the button tag of the selection
const scorePlayer = document.getElementsByClassName("playerScore")
const scoreComputer = document.getElementsByClassName("computerScore")
const buttons = document.querySelectorAll("button")
const results = document.getElementsByClassName("Results")
buttons.forEach(button => {
button.addEventListener('click', function() {
playRound(this.value)
})
})
let playerScore = 0
let computerScore = 0
function computerPlay() {
const selections = ["rock", "paper", "scissors"]
return selections[Math.floor(Math.random() * selections.length)];
}
function playRound(playerSelection) {
let computerSelection = computerPlay()
let result = ""
if (playerSelection == "rock" && computerSelection == "scissors" || playerSelection == "paper" && computerSelection == "rock" || playerSelection == "scissors" && computerSelection == "paper") {
result = ("you win! " + playerSelection + " beats " + computerSelection + "!")
playerScore += 1
}
if (playerSelection == "scissors" && computerSelection == "rock" || playerSelection == "rock" && computerSelection == "paper" || playerSelection == "paper" && computerSelection == "scissors") {
result = ("you lose! " + computerSelection + " beats " + playerSelection + "!")
computerScore += 1
} else if (playerSelection == computerSelection) {
result = ("its a draw");
}
results.innerhtml = result
return
}
scorePlayer.innerhtml = playerScore
scoreComputer.innerhtml = computerScore
<div class="playerScore"></div>
<div class="computerScore"></div>
<button value="rock">Rock</button>
<button value="paper">Paper</button>
<button value="scissors">Scissors</button>

Typos like innerhtml instead of innerHTML
Issues like
getElementsByClassName returns a nodelist
missing quotes in the array
Missing showing the score
const scorePlayer = document.querySelector(".playerScore")
const scoreComputer = document.querySelector(".computerScore")
const buttons = document.querySelectorAll("button")
const results = document.querySelector(".results")
const selections = ["rock", "paper", "scissors"]
let playerScore = 0
let computerScore = 0
buttons.forEach(button => {
button.addEventListener('click', function() {
playRound(this.value)
})
})
function computerPlay() {
return selections[Math.floor(Math.random() * selections.length)];
}
function playRound(playerSelection) {
let computerSelection = computerPlay()
let result = "It's a draw"; // default
console.log(playerSelection,computerSelection)
if (playerSelection === "rock" && computerSelection === "scissors" ||
playerSelection === "paper" && computerSelection === "rock" ||
playerSelection === "scissors" && computerSelection === "paper") {
result = ("you win! " + playerSelection + " beats " + computerSelection + "!")
playerScore += 1
}
if (playerSelection === "scissors" && computerSelection === "rock" ||
playerSelection === "rock" && computerSelection === "paper" ||
playerSelection === "paper" && computerSelection === "scissors") {
result = ("you lose! " + computerSelection + " beats " + playerSelection + "!")
computerScore += 1
}
scorePlayer.innerHTML = playerScore
scoreComputer.innerHTML = computerScore
results.innerHTML = result
}
scorePlayer.innerhtml = playerScore
scoreComputer.innerhtml = computerScore
<button value="rock">Rock</button>
<button value="paper">Paper</button>
<button value="scissors">Scissors</button>
<div class="playerScore"></div>
<div class="computerScore"></div>
<div class="results"></div>

How to increment score in Javascript RPS before ending game?

I am working on the Odin RPS game that determines the winner based on the first to 5 wins. I have a function that declares the winner via an alert after they hit 5 wins, however, the alert message pops up first and declares the winner before the score increments to its final display of 5 wins. Can anyone explain why? I have the gameEnd function after the keepScore function. I also tried adding the keepScore function within each result of the gamePlay function but the alert always displays first declaring the winner before the score increments to 5. I also have to click the game again to get the counter to reset the scores to 0 when the function tells it to reset to 0 when the gameEnd function runs. JS code below (also I know the winner is always declared the computer. I will change this after I get the function working...)
let playerScore = 0;
let computerScore = 0;
const computerChoice = document.getElementById("computerChoice")
const playerChoice = document.getElementById("playerChoice")
const result = document.getElementById("result")
const playerScoreCum = document.getElementById("playerScore")
const computerScoreCum = document.getElementById("computerScore")
let playerSelection
let computerSelection
let results
const possibleChoices = document.querySelectorAll('button.btn[data-selection]')
possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
playerSelection = e.target.getAttribute('data-selection');
playerChoice.textContent = playerSelection;
computerPlay();
gamePlay();
keepScore();
gameEnd();
}))
function computerPlay () {
let computerOptions = ["rock", "paper", "scissors"];
computerSelection = computerOptions [Math.floor(Math.random() * computerOptions.length)];
computerChoice.textContent = computerSelection
}
function gamePlay () {
if (playerSelection == "rock" && computerSelection == "scissors")
{
results = "You won!";
++playerScore;
}
else if (playerSelection == "rock" && computerSelection == "paper")
{
results = "You lost!";
++computerScore;
}
else if (playerSelection == "paper" && computerSelection == "scissors")
{
results = "You lost!";
++computerScore;
}
else if (playerSelection == "paper" && computerSelection == "rock")
{
results = "You won!";
++playerScore;
}
else if (playerSelection == "scissors" && computerSelection == "paper")
{
results = "You won!";
++playerScore;
}
else if (playerSelection == "scissors" && computerSelection == "rock")
{
results = "You lost!";
++computerScore;
}
else {results = "It's a tie!!!"}
}
function keepScore () {
result.textContent = results
playerScoreCum.textContent = playerScore
computerScoreCum.textContent = computerScore
}
function gameEnd () {
if (playerScore === 5 || computerScore === 5) {
playerScore = 0;
computerScore = 0
alert("Computer won the game!!!")
}
}

There's a hacky workaround for that - you could use setTimeout(gameEnd, 0) where you are calling the gameEnd function. This is because setTimeout() itself gets called synchronously, and placed on the callstack right after keepScore().
I haven't myself tried this yet though.

Why won't my variable increment everytime I run the program?

This is a game where the player plays against the computer in a rock paper scissors game. I am trying to make the computer score or player score go up depending on which one wins. But it does not increment when I try to run it. I am new to functions and returning values so I do not really understand it.
// Declaring variables
let playerScore = 0;
let computerScore = 0;
// Gives a random value from the array
function computerPlay(){
var things = ['rock', 'paper', 'scissors'];
var random = things[Math.floor(Math.random()*things.length)];
console.log('The computer chose: ' + random);
return random;
}
// plays a round of the game
function playRound(playerSelection, computerSelection){
if(playerSelection === computerSelection){
console.log("tie");
}
else if(playerSelection === "rock" && computerSelection === "paper"){
console.log("YOU LOSE");
computerWin();
}
else if(playerSelection === "rock" && computerSelection === "scissors"){
console.log("YOU WIN");
playerWin();
}
else if(playerSelection === "paper" && computerSelection === "rock"){
console.log("YOU WIN");
playerWin();
}
else if(playerSelection === "paper" && computerSelection === "scissors"){
console.log("YOU LOSE");
computerWin();
}
else if(playerSelection === "scissors" && computerSelection === "paper"){
console.log("YOU WIN");
playerWin();
}
else{
console.log("YOU LOSE");
computerWin();
}
}
function playerWin(){
++playerScore;
console.log("Player Score is " + playerScore);
}
function computerWin(){
++computerScore;
console.log("Computer Score is " + computerScore)
}
// Call functions
let chooseWord = "Choose ";
let playerSelection = prompt(chooseWord);
console.log(playerSelection.toLowerCase());
let computerSelection = computerPlay();
computerSelection.toLowerCase();
playRound(playerSelection, computerSelection);
computerWin();
playerWin();

Overall code works well. The improvement to make it a game is to create a loop for a given score (here is to 3 wins).
// Declaring variables
let playerScore = 0;
let computerScore = 0;
// Gives a random value from the array
function computerPlay(){
var things = ['rock', 'paper', 'scissors'];
var random = things[Math.floor(Math.random()*things.length)];
console.log('The computer chose: ' + random);
return random;
}
// plays a round of the game
function playRound(playerSelection, computerSelection){
if(playerSelection === computerSelection){
console.log("tie");
}
else if(playerSelection === "rock" && computerSelection === "paper"){
console.log("YOU LOSE");
computerWin();
}
else if(playerSelection === "rock" && computerSelection === "scissors"){
console.log("YOU WIN");
playerWin();
}
else if(playerSelection === "paper" && computerSelection === "rock"){
console.log("YOU WIN");
playerWin();
}
else if(playerSelection === "paper" && computerSelection === "scissors"){
console.log("YOU LOSE");
computerWin();
}
else if(playerSelection === "scissors" && computerSelection === "paper"){
console.log("YOU WIN");
playerWin();
}
else{
console.log("YOU LOSE");
computerWin();
}
}
function playerWin(){
++playerScore;
console.log("Player Score is " + playerScore);
}
function computerWin(){
++computerScore;
console.log("Computer Score is " + computerScore)
}
// Call functions
const playToScore = 3
while(playerScore !== playToScore && computerScore !== playToScore) {
let chooseWord = "Choose ";
let playerSelection = prompt(chooseWord);
console.log(playerSelection.toLowerCase());
let computerSelection = computerPlay();
computerSelection.toLowerCase();
playRound(playerSelection, computerSelection);
console.log('Results are: Player -', playerScore, 'Computer -', computerScore)
}
if (playerScore === playToScore) {
console.log('Player won with score', playerScore)
} else if (computerScore === playToScore) {
console.log('Computer won with score', computerScore)
}

Rock, paper, scissors game javascript

Currently stuck with a rock, paper, scissors game in javascript. Only my last function game() which needs to play a round 5 times is not working. Have tried to work with a for loop but it seems that I'm getting 5 times the same answer instead of 5 different random ones.
Could someone please help me out?
let playerScore = 0;
let computerScore = 0;
const playerSelection = playerPlay();
const computerSelection = computerPlay();
// computer select function
function computerPlay() {
const option = ['rock', 'paper', 'scissors'];
let random = Math.floor(Math.random() * 3);
return option[random];
}
console.log('Computer: ' + computerSelection);
// player select function
function playerPlay() {
const input = prompt('Please enter input');
const option = input.toLowerCase();
return option;
}
console.log('Player: ' + playerSelection);
// play 1 single round
function playRound(playerSelection, computerSelection) {
if(playerSelection === computerSelection) {
return 'It is a tie';
}
if(playerSelection === 'rock') {
if(computerSelection === 'scissors') {
playerScore++;
return 'Player wins with rock';
} else if(computerSelection === 'paper') {
computerScore++;
return 'Computer wins with paper'
}
}
if(playerSelection === 'paper') {
if(computerSelection === 'rock') {
playerScore++;
return 'Player wins with paper';
} else if(computerSelection === 'scissors') {
computerScore++;
return 'Computer wins with scissors';
}
}
if(playerSelection === 'scissors') {
if(computerSelection === "paper") {
playerScore++;
return 'Player wins with scissors';
} else if(computerSelection === 'rock') {
computerScore++;
return 'Computer wins with rock';
}
}
}
// console.log(playRound(playerSelection, computerSelection));
playRound(playerSelection, computerSelection);
console.log('Player: ' + playerScore);
console.log('Computer: ' + computerScore);
// game
function game() {
for(var i = 1; i <= 5; i++) {
console.log('repeat 5 times');
playRound(playerSelection, computerSelection);
}
}
game();

You have put a loop without asking for the player and computer input, hence it runs 5 times without taking any input. I have fixed this in the snippet. Not entirely sure if you want to run it this way though.
let playerScore = 0;
let computerScore = 0;
// computer select function
function computerPlay() {
const option = ['rock', 'paper', 'scissors'];
let random = Math.floor(Math.random() * 3);
return option[random];
}
// player select function
function playerPlay() {
const input = prompt('Please enter input');
const option = input.toLowerCase();
return option;
}
// play 1 single round
function playRound(playerSelection, computerSelection) {
if (playerSelection === computerSelection) {
return 'It is a tie';
}
if (playerSelection === 'rock') {
if (computerSelection === 'scissors') {
playerScore++;
return 'Player wins with rock';
} else if (computerSelection === 'paper') {
computerScore++;
return 'Computer wins with paper'
}
}
if (playerSelection === 'paper') {
if (computerSelection === 'rock') {
playerScore++;
return 'Player wins with paper';
} else if (computerSelection === 'scissors') {
computerScore++;
return 'Computer wins with scissors';
}
}
if (playerSelection === 'scissors') {
if (computerSelection === "paper") {
playerScore++;
return 'Player wins with scissors';
} else if (computerSelection === 'rock') {
computerScore++;
return 'Computer wins with rock';
}
}
}
// console.log(playRound(playerSelection, computerSelection));
// game
function game() {
for (i = 0; i <= 5; i++) {
var playerSelection = playerPlay();
var computerSelection = computerPlay();
playRound(playerSelection, computerSelection);
console.log('Computer: ' + computerSelection);
console.log('Player: ' + playerSelection);
console.log('Player: ' + playerScore);
console.log('Computer: ' + computerScore);
}
console.log('Final Player: ' + playerScore);
console.log('Final Computer: ' + computerScore);
}
game();

Your probleme is because you're set your playerSelection and computerSelection once (and even on a const ! So choice cannot be updated)
You just have to move this part into you for loop (and update to let instead of const)
let playerSelection = playerPlay();
let computerSelection = computerPlay();
let playerScore = 0;
let computerScore = 0;
// computer select function
function computerPlay() {
const option = ['rock', 'paper', 'scissors'];
let random = Math.floor(Math.random() * 3);
return option[random];
}
// player select function
function playerPlay() {
const input = prompt('Please enter input');
const option = input.toLowerCase();
return option;
}
// play 1 single round
function playRound(playerSelection, computerSelection) {
if(playerSelection === computerSelection) {
return 'It is a tie';
}
if(playerSelection === 'rock') {
if(computerSelection === 'scissors') {
playerScore++;
return 'Player wins with rock';
} else if(computerSelection === 'paper') {
computerScore++;
return 'Computer wins with paper'
}
}
if(playerSelection === 'paper') {
if(computerSelection === 'rock') {
playerScore++;
return 'Player wins with paper';
} else if(computerSelection === 'scissors') {
computerScore++;
return 'Computer wins with scissors';
}
}
if(playerSelection === 'scissors') {
if(computerSelection === "paper") {
playerScore++;
return 'Player wins with scissors';
} else if(computerSelection === 'rock') {
computerScore++;
return 'Computer wins with rock';
}
}
}
// game
function game() {
for(var i = 1; i <= 5; i++) {
let playerSelection = playerPlay();
let computerSelection = computerPlay();
console.log(`[Play turn ${i}] Player: ${playerSelection} | Computer: ${computerSelection}`);
playRound(i);
}
}
game();

Your code has a few issues.
You don't display output of next games. They are played but result is the same. It's same game configuration repeated 5 times.
console.log('repeat 5 times');
console.log(playRound(playerSelection, computerSelection));
Instead of:
console.log('repeat 5 times');
console.log(playRound(playerSelection, computerSelection));
You run functions playerSelection, computerSelection only once. So every next play has the same result.
You should execute these functions with every loop iteration.
Example:
let playerSelection = function () {
const input = prompt('Please enter input');
const option = input.toLowerCase();
return option;
};
let computerSelection = function () {
const option = ['rock', 'paper', 'scissors'];
let random = Math.floor(Math.random() * 3);
return option[random];
};
[...]
playRound(playerSelection(), computerSelection());