Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Exit Out of the Loop – One Solution

5:03 with Guil Hernandez

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