Woohoo! A new Figma course has dropped! 🤩

🤑 Join the Treehouse affiliate program and earn 25% commission!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

🫡 Treehouse for Military offers discounts to Veterans, service members and their families!

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Program Multiple Outcomes

5:45 with Guil Hernandez

Add variety to your programs using 'else if' statements. 'else if' provides multiple program paths with numerous conditions.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Improve the Random Number Guessing Game

Follow the notes below to put the else if clause to use in the random number guessing game you wrote earlier. So far in the game, the player either guesses the correct answer or not. But you can improve it by giving the player a clue then letting them guess again.

let correctGuess = false;
const number = 6; 
const guess = prompt('Guess a number between 1 and 10.');

if ( +guess === number ) {
  correctGuess = true;
} else if ( +guess < number ) {
  const guessMore = prompt(`Try again. The number is higher than ${guess}`);
  if ( +guessMore === number ) {
    correctGuess = true;
  }
} else if ( +guess > number ) {
  const guessLess = prompt(`Try again. The number is lower than ${guess}`);
  if ( +guessLess === number ) {
    correctGuess = true;
  }
}

if ( correctGuess ) {
  console.log("You guessed the number!");    
} else {
  console.log(`Sorry. The number was ${number}.`);  
}

The code above performs three tests:

Does the player's guess match the random number?
Is the player's guess less than the random number?
Is the player's guess greater than the random number?

else if Conditions

The two else if clauses test two conditions:

First, is the guess lower than the random number?
Next, is the guess higher?

If the guess is lower, the program lets the player know and asks them to guess again via a second prompt() dialog. The program then checks the second guess and tests if it's correct. This is done by nesting an if conditional statement inside the code block.

The nested if conditional only runs if the first else if condition is true -- if the player's second guess is less than the random number. If that guess is correct, the correctGuess variable changes to true.

The second else if clause also has a nested if statement. If the player's second guess is greater than the random number, correctGuess changes to true.

The rest of the code should remain the same. Now the user has a second chance to guess if their first guess is wrong!

Resources

else if – MDN

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

So far, the conditional statements we've created provide just two possible paths. 0:00

Let's call them door number one, door number two. 0:05

If a condition is true, like the user entered a name in an input field, 0:08

the program passes through door number one. 0:12

But if the condition is false, then the program passes through door number two. 0:14

But what if you want many different outcomes, not just two? 0:19

In our daily lives, we're used to many possible outcomes. 0:23

For example, say it's your day off from work and 0:27

you're trying to figure out what to do for the day. 0:29

Your first step might be to find out what the weather's like. 0:32

Based on this, you could plan your day. 0:34

For example, if it's hot and 0:37

sunny, you might go swimming, if it's snowing, you might go sliding or skiing. 0:38

If it's raining, you might stay in and read a book. 0:42

You can't do all three, only one, and each choice is based on a series of conditions. 0:45

If it's hot and sunny, if it's snowing, if it's raining. 0:50

JavaScript also includes a way for 0:55

a program to provide multiple outcomes using what's called an else if clause. 0:57

All right, now let's open the else-if.js file inside the js folder and 1:03

as usual, update the script tag and index.html so that it points to else-if.js 1:08

So else if works like this, you start with an if statement. 1:17

Then add an else if clause, which provides another condition to test. 1:22

So now you have two conditions. 1:27

If the first one is true, 1:30

then the code in the first block between the first pair of braces runs. 1:32

Let's call this door number one. 1:36

However, if the first condition is false, then we test a second condition. 1:38

If the answer to that condition is true, 1:43

then the code in the second code block runs. 1:46

Let's call this door number two. 1:49

The second condition is not tested if the first condition is true. 1:51

This is important. 1:56

You'll only get to the second condition if the first is false. 1:57

Now, if neither of the conditions is true, you might want to provide a fallback, 2:02

door number three, so that the program does something. 2:07

You can do this by adding an else clause to the end. 2:10

Notice how there is no condition for this last part. 2:15

However, the code block at the end only ever runs if both of 2:19

the conditions above are false. 2:24

And there's no limit to the number of else if clauses you can add. 2:33

But remember that you must start with an if statement and 2:37

the else clause, if there is one, must go at the end. 2:40

So now there is three test conditions and four possible outcomes. 2:44

And keep in mind that as soon as one test condition is true, the code for 2:49

that condition runs, and all the conditions following, 2:54

including the very last else clause are skipped. 2:58

Now, let's see how you might use this conditional statement in a program. 3:01

Earlier, I gave some examples of activities you can do based on weather 3:05

conditions. 3:08

For instance, if it's snowing, you could go sledding. 3:08

Your first step might be to find out what the weather is like, 3:11

based on that you could plan your day. 3:15

And the first condition, I'll check if weather strictly equals the string, sun. 3:17

If it's sun, log the message it's sunny, so I'm going swimming. 3:25

In the else if clause, I can check if weather strictly equals rain. 3:39

And if it's rain, log it's raining, so I will read a book. 3:49

I'll have the next else if clause check if weather strictly equals snow. 4:03

And if so, then log the message, it's snowing, so I'm going sledding. 4:13

Now, the else block at the end only ever runs if all three of these 4:27

conditions are false. 4:31

In that case, log the message, I don't know what I'm doing today. 4:34

Before testing this code, I need to declare the weather variable, and 4:47

assign it either sun, rain, or snow. 4:52

I'll try rain first. 4:55

I'll save my code. 4:59

And over in the console, since weather = rain, I see the message, 5:00

it's raining, so I will read a book. 5:04

I'll try sun. 5:10

Then snow. 5:14

And it works. 5:19

Now if I change the value of weather to an empty string or 5:21

anything other than rain, sun, or snow, for example. 5:25

The console prints, I don't know what I'm doing today. 5:29

So as you've learned, an else if clause provides a way to make a program more 5:34

flexible and able to respond on to multiple conditional outcomes. 5:38

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up