JavaScript If Statements

When you write code, you will often need to use conditional statements, such as "if" statements. Here's an explanation of the JavaScript If statement.

A conditional statement refers to a piece of code that does one thing based on one condition, and another based on another condition. In fact, you could have as many conditions as you like.

JavaScript If statements are an example of conditional statements. With If statements, you can tell the browser to execute a piece of code only if a given condition is true.

Example If statement:

<script>
function analyzeColor1(myColor) {
	if (myColor == "Blue") {
	    alert("Just like the sky!");
	}
}
</script>
<h3>Favorite Color</h3>
<label>
	<input type="radio" name="fav_color1" value="Blue" onclick="analyzeColor1(this.value);"> Blue
</label>
<label>
	<input type="radio" name="fav_color1" value="Red" onclick="analyzeColor1(this.value);"> Red
</label>
<label>
	<input type="radio" name="fav_color1" value="Green" onclick="analyzeColor1(this.value);"> Green
</label>

Explanation of code

We create three radio buttons using the HTML <input> element. Each of the radio buttons have a different value. The value is set using the value attribute (eg, value="Blue")
When the user clicks any of the radio buttons, we use the onclick event handler to call the analyzeColor1() function. When we call that function, we pass in the value of the radio button (using this.value). The function then takes that value and performs an if statement on it.
The if statement's first line is if (myColor == "Blue") {. This means that it will test the value of the myColor variable. It will test to see if it's value is equal to Blue. Notice the opening curly brace on this line (the closing one is two lines down).
In between the curly braces, we write whatever we want to occur in the event the test is true (i.e. the color is equal to Blue). In this case, we display an alert box with a customized message.

To create a JavaScript If statement

Start with the word if
Between open and closed brackets, write the actual condition that is being tested (i.e. if something is equal to something else).
Between open and closed curly brackets ({}), specify what will happen if the condition is satisfied.

JavaScript If Else statement

The above code is OK if you only want to display something when the condition is true. But what if you want to display something when the condition is not true. For example, what if the variable myColor was equal to, say, Red?

This is where an If Else statement comes in handy. The else part is what we're interested in here. The else is what tells the browser what to do if the condition is not true.

Example If Else statement:

<script>
function analyzeColor2(myColor) {
	if (myColor == "Blue") {
		alert("Just like the sky!");
		}
	else {
		alert("Didn't pick blue huh?");
	}
}
</script>
<h3>Favorite Color</h3>
<label>
	<input type="radio" name="fav_color2" value="Blue" onclick="analyzeColor2(this.value);"> Blue
</label>
<label>
	<input type="radio" name="fav_color2" value="Red" onclick="analyzeColor2(this.value);"> Red
</label>
<label>
	<input type="radio" name="fav_color2" value="Green" onclick="analyzeColor2(this.value);"> Green
</label>
<label>
	<input type="radio" name="fav_color2" value="None" onclick="analyzeColor2(this.value);"> None
</label>

Explanation of code

The first part of this code is the same as the previous example. The second part is where we specify what to do if the condition is not true. Therefore, you write else followed by what you want to occur, surrounded by curly braces.

Write an if statement (as per first example)
Follow this with the word else
Between open and closed curly brackets ({}), specify what to do next.

JavaScript If Else If statement

The If Else If statement is more powerful than the previous two. This is because you can specify many different outputs based on many different conditions — all within the one statement. You can also end with an else to specify what to do if none of the conditions are true.

Example If Else If statement:

<script>
function analyzeColor3(myColor) {
	if (myColor == "Blue") {
		alert("Just like the sky!");
		}
	else if (myColor == "Red") {
		alert("Just like shiraz!");
	}
	else {
		alert("Suit yourself then...");
	}
}
</script>
<h3>Favorite Color</h3>
<label>
	<input type="radio" name="fav_color3" value="Blue" onclick="analyzeColor3(this.value);"> Blue 
</label>
<label>
	<input type="radio" name="fav_color3" value="Red" onclick="analyzeColor3(this.value);"> Red 
</label>
<label>
	<input type="radio" name="fav_color3" value="Green" onclick="analyzeColor3(this.value);"> Green 
</label>
<label>
	<input type="radio" name="fav_color3" value="None" onclick="analyzeColor3(this.value);"> None
</label>

Explanation of code

We started with an if and ended with an else, however, in the middle, we used an else if statement to specify what to do if the myColor variable was equal to Red. This statement looks exactly like the if statement — just with an else prepended to it.

By the way, we could have specified as many else if conditions as we liked.

If you do have many "else if" conditions, you might consider using a JavaScript Switch statement. The Switch statement is explained in the next lesson.