Validate user input from prompt in JavaScript

Question

So I was extending the rock/paper/scissors JS game from Codecademy to validate user input, but I can't get the program to keep on asking for the right user input when the user inserts something other than 'rock', 'paper' or 'scissors'.

var userChoice;

userChoice = prompt('Do you choose rock, paper, or scissors?');
console.log('User choice: ' + userChoice);

if (userChoice !== 'rock' && userChoice !== 'paper' && userChoice !== 'scissors') {
    userChoice = prompt('Select again.');
} else if (userChoice === computerChoice) {
    userChoice = prompt('It\'s a tie! Pick again.');
    console.log('New user choice: ' + userChoice);
}

//computer random choice
var computerChoice = Math.random();
console.log('Computer random number: ' + computerChoice);

// assign rock, paper, scissors values
if (computerChoice <= 0.33) {
    computerChoice = 'rock';
} else if (computerChoice <= 0.67) {
    computerChoice = 'paper';
} else {
    computerChoice = 'scissors';
}

console.log('Computer choice: ' + computerChoice);

// compare user and computer choices
var compare = function(choice1, choice2) {
    if (choice1 === 'rock') {
        if (choice2 === 'scissors') {
            return 'Rock wins!';
        } else {
            return 'Paper wins!';
        }
    } else if (choice1 === 'scissors') {
        if (choice2 === 'rock') {
            return 'Rock wins!';
        } else {
            return 'Scissors win!';
        }
    } else if (choice1 === 'paper') {
        if (choice2 === 'rock') {
            return 'Paper wins!';
        } else {
            return 'Scissors win!';
        }
    }
};

console.log(compare(userChoice, computerChoice));

This works fine the first time the user enters something like 'r' to the prompt, but if the input is something wrong the second time, it doesn't work and the console logs undefined on the last line console.log(compare(userChoice, computerChoice)); How do I get it to keep on asking for the valid input? Thanks in advance guys!

Gnarlywhale · Accepted Answer · 2015-07-31 05:59:30Z

2

After you run userChoice = prompt('Select again.');, you just continue on to complete the rest of the code execution. What you need is some kind of looping condition that checks if they have entered valid input and lets the code continue only once it is valid. (hint: "while" loops)

Try out the following:

//to do
// after it is a tie, making the same choice doesn't do anything?
// keep on prompting if incorrect input again

// take user input
var userChoice;

userChoice = prompt('Do you choose rock, paper, or scissors?');
console.log('User choice: ' + userChoice);

var valid = false;

//computer random choice
var computerChoice = Math.random();
console.log('Computer random number: ' + computerChoice);

// assign rock, paper, scissors values
if (computerChoice <= 0.33) {
    computerChoice = 'rock';
} else if (computerChoice <= 0.67) {
    computerChoice = 'paper';
} else {
    computerChoice = 'scissors';
}

while (!valid) {
    if (userChoice !== 'rock' && userChoice !== 'paper' && userChoice !== 'scissors') {
        userChoice = prompt('Select again.');
    } else if (userChoice === computerChoice) {
        userChoice = prompt('It\'s a tie! Pick again.');
        //computer random choice
        var computerChoice = Math.random();
        console.log('Computer random number: ' + computerChoice);

        // assign rock, paper, scissors values
        if (computerChoice <= 0.33) {
            computerChoice = 'rock';
        } else if (computerChoice <= 0.67) {
            computerChoice = 'paper';
        } else {
            computerChoice = 'scissors';
        }
        console.log('New user choice: ' + userChoice);
    } else {
     valid = true;
    }
}


console.log('Computer choice: ' + computerChoice);

// compare user and computer choices
var compare = function(choice1, choice2) {
    if (choice1 === 'rock') {
        if (choice2 === 'scissors') {
            return 'Rock wins!';
        } else {
            return 'Paper wins!';
        }
    } else if (choice1 === 'scissors') {
        if (choice2 === 'rock') {
            return 'Rock wins!';
        } else {
            return 'Scissors win!';
        }
    } else if (choice1 === 'paper') {
        if (choice2 === 'rock') {
            return 'Paper wins!';
        } else {
            return 'Scissors win!';
        }
    }
};

console.log(compare(userChoice, computerChoice));

edited Jul 31, 2015 at 5:59

answered Jul 31, 2015 at 4:11

Gnarlywhale

4,2602 gold badges17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Blueshift Over a year ago

Thanks a lot! The while loop in your code was missing a closing bracket, and the last else if comparison had some spelling error. With that fixed, I'm seeing that the check for a tie inside the while loop is not working as it should (it doesn't prompt the user again for input). What are we missing?

Blueshift Over a year ago

It's actually missing the valid = true; statement to break out of the while loop this time, and from what I can see the check for a tie is still behaving the same way as before :/

Gnarlywhale Over a year ago

... that was a test and you passed... I did indeed forget the valid = true statement. Your implementation of the tie condition is working on my end, the prompt keeps being given until the user enters a valid entry that is not a tie, what is your desired output if not this?

Gnarlywhale Over a year ago

was missing the final console.log(compare(userChoice, computerChoice)); line. If you have anymore questions let me know

Gnarlywhale Over a year ago

Ah, I see what your saying, the problem is that the computer's choice should be determined before the user ever inputs their choice. Every time the game results in a tie, both the player and the computer should pick different answers (as it is in actual rock-paper-scissors). Check out my latest edit and note that you can abstract the protocol that determines the computers answer into a separate function since you call it more than once.

|

eddyjs · Accepted Answer · 2015-07-31 04:15:52Z

0

You have a few issues with your code. To solve the first problem you can do this:

var userChoice;

userChoice = prompt('Do you choose rock, paper, or scissors?');
console.log('User choice: ' + userChoice);

while (userChoice !== 'rock' && userChoice !== 'paper' && userChoice !== 'scissors') {
    userChoice = prompt('Select again.');
}

however, you still have an issue with the second part:

if (userChoice === computerChoice) {
    userChoice = prompt('It\'s a tie! Pick again.');
    console.log('New user choice: ' + userChoice);
}

This code will never fire because you calculate computerChoice AFTER making the comparison. You should move this code into your compare function:

var compare = function(choice1, choice2) {
    if (choice1 === choice2) {
        return 'It\'s a tie!';
    } else if (choice1 === 'rock') {
        if (choice2 === 'scissors') {
            return 'Rock wins!';
        } else {
            return 'Paper wins!';
        }
    } else if (choice1 === 'scissors') {
        if (choice2 === 'rock') {
            return 'Rock wins!';
        } else {
            return 'Scissors win!';
        }
    } else if (choice1 === 'paper') {
        if (choice2 === 'rock') {
            return 'Paper wins!';
        } else {
            return 'Scissors win!';
        }
    }
};

edited Jul 31, 2015 at 4:15

answered Jul 31, 2015 at 4:08

eddyjs

1,28010 silver badges20 bronze badges

2 Comments

Blueshift Over a year ago

Appreciate it eddy! Adding the check for a tie inside the compare function like that would not prompt the user again for input, it would only log it is a tie to the console. Also, I ran the program a few times and noticed that with only the while loop in place, the check for a tie I had in my code actually did run.

eddyjs Over a year ago

Oh, interesting... well, I'm glad you got it working :)

user2575725 · Accepted Answer · 2015-07-31 04:33:09Z

0

it doesn't work and the console logs undefined

Problem is, you are missing the return statement in the function compare():

var compare = function(choice1, choice2) {
    if {
      ...
    }
    return "oops !!"; //<-- missing
};

How do I get it to keep on asking for the valid input?

Using loop can help here. Possibly do..while loop.

answered Jul 31, 2015 at 4:33

user2575725

Collectives™ on Stack Overflow

Validate user input from prompt in JavaScript

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related