Search code examples
javascriptcounter

Javascript output in alert is different in console, and counter is not working properly even when condition is met

I'm making a rock paper scissors games where the counter should add 1 if user wins, add 0.5 if it's a tie, and remains the same if user lost. But in the alert and what's shown in the console doesn't match. Sometimes its shown in the alert that I win and in the console its shown I lose or its a tie. And the counter doesn't add up correctly. Image here

In the image above it's shown 3 wins, 1 tie, and 1 lose. It should show I've won 3.5 games but it shows 5.5. And there is only 5 games played so it should be impossible to win 5.5.

Here is the code:

let winCounter = 0;

// playRound function will play a game of rock, paper, scissors and returns the result
function playRound(playerSelection, computerSelection) {
  let getPlayerInsensitive = playerSelection.toLowerCase();

  if (getPlayerInsensitive === "rock" && computerSelection === "Rock") {
    winCounter+=0.5;
    return "It's a tie, both are Rock";
  } else if (getPlayerInsensitive === "rock" && computerSelection === "Paper") {
    winCounter = winCounter;
    return "You Lose! Paper beats Rock";
  } else if (getPlayerInsensitive === "rock" && computerSelection === "Scissors") {
    winCounter+=1;
    return "You win! Rock beats Scissors";
  } else if (getPlayerInsensitive === "paper" && computerSelection === "Rock") {
    winCounter+=1;
    return "You win! Paper beats Rock";
  } else if (getPlayerInsensitive === "paper" && computerSelection === "Paper") {
    winCounter+=0.5;
    return "It's a tie! Both are Paper";
  } else if (getPlayerInsensitive === "paper" && computerSelection === "Scissors") {
    winCounter = winCounter;
    return "You lose! Scissors beats Paper";
  } else if (getPlayerInsensitive === "scissors" && computerSelection === "Rock") {
    winCounter = winCounter;
    return "You lose! Rock beats Scissors";
  } else if (getPlayerInsensitive === "scissors" && computerSelection === "Scissors") {
    winCounter=0.5;
    return "It's a tie! Both are Scissors";
  } else if (getPlayerInsensitive === "scissors" && computerSelection === "Paper") {
    winCounter+=1;
    return "You win! Scissors beat Paper";
  } else {
    return "Check your spelling!";
  }

}

// game function returns the winner after five rounds
function game() {
  for (let i = 0; i < 5; i++) {

    let getSelect = prompt("Choose Rock, Paper, or Scissors", "");
    if (getSelect === null || getSelect === "") {
      alert("You clicked Cancel!");
    }
    alert(playRound(getSelect, computerPlay()));
    if (i < 5) {
      console.log(playRound(getSelect, computerPlay()));
    }

    //outputs the winner of 5 games

    if (i === 4) {
      alert("You've played 5 games");
      if (winCounter >= 3) {
       alert(`You've won ${winCounter} out of 5 games. You win!`);
       return `You've won ${winCounter} out of 5 games. You win!`;
    } else if (winCounter === 2.5) {
       alert(`You've won 2.5 out of 5 games. It's a tie!`);
       return `You've won 2.5 out of 5 games. It's a tie!`;
    } else if (winCounter < 2.5) {
       alert(`You've won ${winCounter} out of 5 games. You lost!`);
       return `You've won ${winCounter} out of 5 games. You lost!`;
    }

   }
 }

}

console.log(game());

And here is the fiddle: https://jsfiddle.net/JaredDev/o62hr7as/125/

Solution

  • Why does it show different results in alert and console.log

    It's because you called the computerPlay function twice, thus could returns different selection each time it is called,

    alert(playRound(getSelect, computerPlay()));
if (i < 5) {
  console.log(playRound(getSelect, computerPlay()));
}

    you could change it to this, so it is called only once

    const result = playRound(getSelect, computerPlay())
alert(result);
if (i < 5) {
  console.log(result)
}

    also why the score could be more than it should have, its because playRound function also called twice each turn