Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn one solution for breaking out of the loop when a user guesses the random number.
Resources
Display a countdown
The following demonstrates how you might count down from 10 to 1 and display the remaining number of guess attempts to the user.
for ( let i = 10; i >= 1; i-- ) {
let guess = prompt(`You have ${i} tries to guess a number between 1 and 10.`);
if ( parseInt(guess) === randomNumber ) {
message = `It took you ${i} tries to guess the number ${randomNumber}.`;
break;
} else {
message = `You did not guess the number. It was ${randomNumber}.`;
}
}
Take the guessing game further
You can use conditional statements to give the player hints about the number to guess. Consider the following code:
const main = document.querySelector('main');
const randomNumber = getRandomNumber(10);
let message;
let guess = prompt(`Guess a number between 1 and 10.`);
function getRandomNumber(upper) {...}
for ( let i = 9; i >= 1; i-- ) {
if ( +guess > randomNumber ) {
guess = prompt(`Guess a lower number. You have ${i} more tries.`);
} else if ( +guess < randomNumber) {
guess = prompt(`Guess a higher number. You have ${i} more tries.`);
} else if ( +guess === randomNumber ) {
message = `You guessed the number! It was ${randomNumber}.`;
break;
}
message = `You did not guess the number. It was ${randomNumber}.`;
}
main.innerHTML = `<h1>${message}</h1>`;
If the player's guess is higher than the number to guess, the prompt dialog instructs them to guess a lower number. If their guess is lower, the prompt hints at entering a higher number.
Okay, now I'll go over how I would exit
out of the loop when a user guesses
0:00
the random number.
0:04
I'll start by adding an if
statement inside this code block.
0:06
It checks if the user's guess is correct
by comparing the player's guess to
0:09
the number assigned to
the random number variable.
0:14
If this condition evaluates to true,
0:23
the loop should immediately end and
the success message should appear.
0:25
In the conditional statement,
I'll use JavaScript's break statement.
0:30
Which as you've learned,
when encountered inside a loop,
0:35
immediately terminates the loop.
0:38
Now if the user guesses the correct
number before a tenth try, the loop ends.
0:40
Then the main.innerHTML
statement here runs.
0:45
Let's try it.
0:49
Immediately after guessing the correct
number, I get the message,
0:53
it took you 2 tries to guess the number 2.
0:57
Great, but what happens if I don't
guess the number after 10 tries?
1:00
I get the message, it took you
10 tries to guess the number 10.
1:06
Well, that's not true because
I did not guess the number.
1:10
Okay, so if the user does not guess the
random number within 10 tries, the page
1:13
should display a message letting them know
that they did not guess the number, and
1:18
reveal what that number was.
1:22
What I will do is to declare a new
variable up top named message.
1:24
Then in the if statement just before
the break statement assign message,
1:31
the success message.
1:36
I'll cut the text between the h1 tags
out of this template literal and
1:42
paste it inside the if statement.
1:46
Next, I'll add an else clause
that assigns a different value
1:51
to the message variable,
if the user did not guess the number.
1:56
The page will display the message,
you did not guess the number.
2:00
And it will reveal
the number via the message,
2:07
it was ${random number}.
2:13
Finally, when the loop completes,
the main.innerHTML statement
2:16
should display the final value assigned
to message inside an h1 element.
2:21
I'll save my file and
test my latest changes.
2:27
After 2 tries, I guess the number.
2:33
And the message, it took you 2 tries
to guess the number 2 displays.
2:36
And if I don't guess the number
after 10 tries, I get the message,
2:41
you did not guess the number, it was 3.
2:44
Good, let's do one more thing.
2:47
You've learned that a for
2:50
loop is a more compact variation of
the while or even do while loop.
2:52
And it's really useful when you know how
many times you want to repeat an action.
2:56
This next part is entirely optional.
3:00
But why don't you pause the video now and
try converting your while or
3:02
do while loop into a for loop.
3:07
Then I'll walk you through
how I would do it.
3:09
Okay, let's see how this might look and
work as a for loop.
3:12
First, I'll replace the do statement with
a for statement, followed by parentheses.
3:15
I'll write my three expressions
inside the parentheses,
3:22
(let i = 1; i is less than or
equal to 10; i++).
3:29
And I'll remove the while statement.
3:34
Since i is a counter variable that
increments by one each time through
3:39
the loop, I can use the value of i
to keep track of guess attempts.
3:45
Now I can delete the attempts variable.
3:50
And in the if statement,
3:55
replace attempts here with i.
3:59
And the program still works as expected.
4:03
Also since the guess variable is now used
inside the for block only, I can change
4:07
its declaration from being in the global
scope to the scope of the for statement.
4:13
Now the variable is locally
scoped to this for block,
4:24
it will only be accessible
inside the loop.
4:28
And this change does not make any
significant difference in the way
4:32
the code runs.
4:35
All right, this completes the number
guessing game practice session.
4:39
Nice work.
4:43
Again, if you weren't able to complete
certain parts of this practice session,
4:44
that's totally okay.
4:48
You could always start over and
try it again.
4:49
You're also going to learn more about
working with loops throughout our
4:51
JavaScript curriculum.
4:55
Thanks everyone and happy learning.
4:56
You need to sign up for Treehouse in order to download course files.
Sign up