Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Dani Ivanov
Dani Ivanov
10,732 Points

Rock, Paper, Scissor Game (if/elseif statements problem)

Hello,

I am trying to create a Rock, Paper, Scissor game, but although in the script everything seems good, I am just not getting the desired result with those if else statements.

Here is the code. I hope someone can give me a hint to what I am doing wrong. 

var user = prompt("Choose Rock, Paper or Scissor");

var computerChoice = function() {
var randomNumber = Math.floor(Math.random() * 3 + 1);  
 if(randomNumber === 1) {
  var computer = "rock";
 } else if (randomNumber === 2) {
  var computer = "scissor";
 } else if (randomNumber === 3) {
  var computer = "paper"; 
 }
return computer;  
};



function compare() {
var output = "";
  if( user.toUpperCase() === "ROCK" && computerChoice().toUpperCase() === "SCISSOR" ) {
    output += user + " wins vs " + computerChoice() + ". Congratulations!";
  } else if (user.toUpperCase() === "SCISSOR" && computerChoice().toUpperCase() === "ROCK") {
    output += user + " wins vs " + computerChoice() + ". Congratulations!";
  } else if (user.toUpperCase() === "PAPER" && computerChoice().toUpperCase() === "ROCK") {
    output += user + " wins vs " + computerChoice() + ". Congratulations!";
  } else if( user.toUpperCase() === "SCISSOR" && computerChoice().toUpperCase() === "ROCK" ) {
    output += user + " loses vs " + computerChoice() + ". Try again";
  } else if (user.toUpperCase() === "ROCK" && computerChoice().toUpperCase() === "PAPER") {
    output += user + " loses vs " + computerChoice() + ". Try again";
  } else if (user.toUpperCase() === "PAPER" && computerChoice().toUpperCase() === "SCISSOR") {
    output += user + " loses vs " + computerChoice() + ". Try again!";
  } else if (user.toUpperCase() === "PAPER" && computerChoice().toUpperCase() === "PAPER") {
    output += "Its a draw. Try again";
  } else if (user.toUpperCase() === "ROCK" && computerChoice().toUpperCase() === "ROCK") {
    output += "Its a draw. Try again";
  } else if (user.toUpperCase() === "SCISSOR" && computerChoice().toUpperCase() === "SCISSOR") {
    output += "Its a draw. Try again";
  } else {
    output += "None selected"; 
  }
  return output;  
}

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hey there Dani Ivanov,

There were a few things I had to do to your code to get the scenarios to work as expected. You had just a few problems I wanna go over with you, as well.

I changed the computerChoice function to computerChoose and then made a variable called computerChoice. The reason why I did that is so that I only call the function one time to get the computer's choice. The problem with your else-if's in your compare function is that whenever you were adding to the output variable, it was calling the function again, which means it was assigning another random value to computerChoice. That's definitely not what we want. Notice that there are no more parenthesis beside the variable name, because we only want to retrieve what the computer chose, not continue to execute that computerChoose function, and then execute it again with another set of parentheses. And since "computerChoice" is now a variable instead of a function expression, we can just call it's value without having to re-call the function.

I also changed both functions so that they just return the value we want instead of having to create a variable and then return the variable. It's faster that way.

You also had a few scenarios that were a little backwards, but that's no problem! I just had to fix a few of those win/loss scenarios, and we're back in business! :) Try this on for size, Dani.

var user = prompt("Choose Rock, Paper or Scissor");

var computerChoose = function() {
var randomNumber = Math.floor(Math.random() * 3 + 1);  
 if (randomNumber === 1) {
        return "rock";
 } else if (randomNumber === 2) {
       return "scissor";
 } else if (randomNumber === 3) {
       return "paper"; 
 }
};

var computerChoice = computerChoose();

function compare() { 
  if( user.toUpperCase() === "ROCK" && computerChoice.toUpperCase() === "SCISSOR" ) {
    return user + " wins vs " + computerChoice + ". Congratulations!";
  } else if (user.toUpperCase() === "SCISSOR" && computerChoice.toUpperCase() === "PAPER") {
    return user + " wins vs " + computerChoice + ". Congratulations!";
  } else if (user.toUpperCase() === "PAPER" && computerChoice.toUpperCase() === "ROCK") {
    return user + " wins vs " + computerChoice + ". Congratulations!";
  } else if( user.toUpperCase() === "PAPER" && computerChoice.toUpperCase() === "SCISSOR" ) {
    return user + " loses vs " + computerChoice + ". Try again";
  } else if (user.toUpperCase() === "ROCK" && computerChoice.toUpperCase() === "PAPER") {
    return user + " loses vs " + computerChoice + ". Try again";
  } else if (user.toUpperCase() === "SCISSOR" && computerChoice.toUpperCase() === "ROCK") {
    return user + " loses vs " + computerChoice + ". Try again!";
  } else if (user.toUpperCase() === "PAPER" && computerChoice.toUpperCase() === "PAPER") {
    return "Its a draw. Try again";
  } else if (user.toUpperCase() === "ROCK" && computerChoice.toUpperCase() === "ROCK") {
    return "Its a draw. Try again";
  } else if (user.toUpperCase() === "SCISSOR" && computerChoice.toUpperCase() === "SCISSOR") {
    return "Its a draw. Try again";
  } else {
    return "None selected"; 
  }
}

console.log(compare());
Dani Ivanov
Dani Ivanov
10,732 Points

Marcus thanks for taking the time to read and provide such a good answer. You helped me understand JavaScript a little bit better.

Marcus Parsons
Marcus Parsons
15,719 Points

Anytime, Dani! I'm here to help!

Casey Ydenberg
Casey Ydenberg
15,622 Points
Casey Ydenberg
Casey Ydenberg
15,622 Points

Well, it looks like in the second case the user picks SCISSOR and the computer picks ROCK, and the user wins, which isn't right.

It's a bit hard to read such a long sequence of if else statements. The first thing you could do would be to combine three of them into the same logic: if the computer and the user pick the same thing, regardless of what it is, the game is a draw. The second I would do would be to represent the three choices as numbers (probably -1, 0, 1). Your compare function could become much easier to read and you could probably boil a few if elses down to a smaller number of cases.

Marcus Parsons
Marcus Parsons
15,719 Points

I am 99.9% certain that reading paper vs. rock is much easier than reading -1 vs. 1. Also, if you were to use comparison statements on those numbers, that would make two possible win scenarios for the user or computer for some choices, when there is only one possible win scenario per choice.

Dani Ivanov
Dani Ivanov
10,732 Points

I see what you mean and it might make my code a bit shorter but as I am still learning making the code to work with numbers instead of "scissor", "rock" or "paper" will only confuse me more.

Marcus Parsons
Marcus Parsons
15,719 Points

Dani, it would be a little difficult to make this code shorter, and since it works as expected, don't fix what ain't broken, as they say. :)