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 Luke Glazebrook
Luke Glazebrook
13,564 Points

Question about Rock Paper Scissors in JavaScript.

After taking a little break from programming over the Christmas holidays and New Years I am continuing to learn JavaScript. However, recently it has been giving me a rough time and after scanning this code for about the past 20 minutes I cannot figure out what could be going wrong.

<!DOCTYPE html>
<html>
<head>
    <title>Rock Paper Scissors Game</title>
</head>
<body>
    <h1>Rock, Paper, Scissors</h1>
    <div id="outputArea">
        <ul id="playerOutput">

        </ul>
    </div>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

//Rock Paper Scissors JS.

function validChoice(playerOption) {
    if (playerOption.toLowerCase() !== "rock" || playerOption.toLowerCase() !== "paper" || playerOption.toLowerCase() !== "scissors") {
        return false;
    } else {
        return true;
    }
}

var gameWon = false;
var outputArea = document.getElementById("playerOutput");

while (gameWon === false) {
    var playerOption = prompt("What is your choice?");
    var optionValidBool = false; //Used for the loop to check whether the option is valid.
    while (optionValidBool === false) {
        if (validChoice(playerOption) === false) {
            outputArea.innerHTML = outputArea.innerHTML + '<li>Not a valid option. Please choose again.</li>';
            playerOption = prompt("What is your choice?");
        } else {
            outputArea.innerHTML = outputArea.innerHTML + '<li>You chose ' + playerOption + ' and your opponent chose ...';
            optionValidBool = true;
        }
    }
}

Thank you a whole bunch to anyone who helps me out! I am in need of some help.

-Luke

Christian Andersson
Christian Andersson
8,712 Points

What error/problem are you getting?

2 Answers

William Li
PLUS
William Li
Courses Plus Student 26,868 Points
William Li
William Li
Courses Plus Student 26,868 Points

Luke, I'm not sure what kind of error you're getting, but while I'm looking at the validChoice function, shouldn't you be using && instead of ||?

Or, if I am going to rewrite the validChoice myself, I'd probably write it like

function validChoice(playerOption) {
    return playerOption.toLowerCase() === "rock" || playerOption.toLowerCase() === "paper" || playerOption.toLowerCase() === "scissors";
}

feels a little bit more intuitive.

Luke Glazebrook
Luke Glazebrook
13,564 Points

Hi William!

Oh yes! It should be done using 'and' thanks! I don't quite understand how your function works though, William, care to explain?

Christian Andersson
Christian Andersson
8,712 Points

(moved as answer)

Luke Glazebrook
Luke Glazebrook
13,564 Points

Ahh right thank you for explaining it! i have moved on from this problem but now I have stumbled upon another. For some reason my user can never lose; they always win or draw.

Any ideas?

//Rock Paper Scissors JS.

function validChoice(playerOption) {
    if (playerOption.toLowerCase() !== "rock" && playerOption.toLowerCase() !== "paper" && playerOption.toLowerCase() !== "scissors") {
        return false;
    } else {
        return true;
    }
}

function enemyTurn() {
    var randomNum = (Math.round(Math.random() * 2));
    return randomNum;
}

function rockSelected(playerOption) {
    if (playerOption == 'rock') {
        outputArea.innerHTML = outputArea.innerHTML + '<li>You chose ' + playerOption + ' and your opponent chose rock. You drew!';
    } else if (playerOption == 'paper') {
        outputArea.innerHTML = outputArea.innerHTML + '<li>You chose ' + playerOption + ' and your opponent chose rock. You won!';
    } else if (playerOption == 'scissors') {
        outputArea.innerHTML = outputArea.innerHTML + '<li>You chose ' + playerOption + ' and your opponent chose rock. You lost!';
    }
}

function paperSelected(playerOption) {
    if (playerOption == 'rock') {
        outputArea.innerHTML = outputArea.innerHTML + '<li>You chose ' + playerOption + ' and your opponent chose paper. You won!';
    } else if (playerOption == 'paper') {
        outputArea.innerHTML = outputArea.innerHTML + '<li>You chose ' + playerOption + ' and your opponent chose paper. You drew!';
    } else if (playerOption == 'scissors') {
        outputArea.innerHTML = outputArea.innerHTML + '<li>You chose ' + playerOption + ' and your opponent chose paper. You lost!';
    }
}

function scissorsSelected(playerOption) {
    if (playerOption == 'rock') {
        outputArea.innerHTML = outputArea.innerHTML + '<li>You chose ' + playerOption + ' and your opponent chose rock. You lost!';
    } else if (playerOption == 'paper') {
        outputArea.innerHTML = outputArea.innerHTML + '<li>You chose ' + playerOption + ' and your opponent chose rock. You won!';
    } else if (playerOption == 'scissors') {
        outputArea.innerHTML = outputArea.innerHTML + '<li>You chose ' + playerOption + ' and your opponent chose rock. You drew!';
    }
}

alert(enemyTurn());
alert(enemyTurn());
alert(enemyTurn());
alert(enemyTurn());
alert(enemyTurn());

var gameWon = false;
var outputArea = document.getElementById("playerOutput");

while (gameWon === false) {
    var playerOption = prompt("What is your choice?");
    var optionValidBool = false; //Used for the loop to check whether the option is valid.
    while (optionValidBool === false) {
        if (validChoice(playerOption) === false) {
            outputArea.innerHTML = outputArea.innerHTML + '<li>Not a valid option. Please choose again.</li>';
            playerOption = prompt("What is your choice?");
        } else {
            var enemyMove = enemyTurn();
            if (enemyMove === 0) {
                rockSelected(playerOption);
            } else if(enemyMove === 1) {
                paperSelected(playerOption);
            } else if(enemyMove === 2) {
                scissorsSelected(playerOption);
            }
            //outputArea.innerHTML = outputArea.innerHTML + '<li>You chose ' + playerOption + ' and your opponent chose ...';
            optionValidBool = true;
        }
    }
}
Christian Andersson
Christian Andersson
8,712 Points

I got it all working fine! You have lots of errors in your output messages! For example all outputs in scissorsSelected() say that the opponent chose rock. You also have issues with determening the winner. For example if I have rock and the opponent paper it says I win!

So just check your output text and the logic of "who wins when".

Luke Glazebrook
Luke Glazebrook
13,564 Points

Oh right!

I was in a rush and didn't realise that! Thanks!

Christian Andersson
Christian Andersson
8,712 Points
Christian Andersson
Christian Andersson
8,712 Points

He is doing the same thing you did, but in 1 step. The following statement

playerOption.toLowerCase() === "rock";

can either be true or false. So if you do

return playerOption.toLowerCase() === "rock";

you are returning the result of that condition -- true or false. So you both check and return in 1 step.

In this statement

return playerOption.toLowerCase() === "rock" || playerOption.toLowerCase() === "paper" || playerOption.toLowerCase() === "scissors";

you are returning the result of the above "check". So if the playerOption is either "rock", "paper" or "scissors", it returns true. Otherwise false. Another way to do it is like this:

return !(playerOption.toLowerCase() !== "rock" && playerOption.toLowerCase() !== "paper" && playerOption.toLowerCase() !== "scissors");

Both solutions are great approaches to do this. A good rule of thumb is that if you want to check if a variable has a specific set of values you must either do it with: "Not equal" operators with AND's (my example)- or "Equal" operators with OR's (Williams example).