Interactive online courses HTML Academy
2026-03-09 12:23 Diff
https://htmlacademy.org/courses/javascript-basics/dynamic-element-styles/else-if-statement

We told JavaScript to change the color of the bar to red if the password is too short. If the password is of average length, then the bar should turn yellow.

What do we mean by “average length”? This means that the password is greater than 5 characters AND less than 10 characters long. To create a double condition, use the logical operator AND:

passLength > 5 && passLength < 10

But where do we indicate this condition? Use the else if statement. It allows you to add an alternative branch with the following condition to the conditional statement:

if (passLength <= 5) { // The instructions are executed if the first condition is true } else if (passLength > 5 && passLength < 10) { // The instructions are executed if the second condition is true }

Indicate the condition in parentheses after else if, and indicate the instructions that should be executed in curly braces if the condition returns true.

Imagine that a user entered a password that was 6 characters long. JavaScript first checks the first condition: is the password length less than or equal to 5 characters? No. So, let’s move on. Check the next condition: is the password longer than 5 characters, but less than 10? Yes. This means that we will execute the instructions from the second branch.

You can have as many else if branches in the conditional statement as you want. But the more you have of them, the more confusing the code is.

Add an else if branch to the conditional statement, and tell JavaScript to change the color of the bar to yellow if the password is longer than 5 characters but shorter than 10.

Instead of yellow, we’ll actually use the colour gold, because that will show up better against the page’s background colour.