JavaScript if else statement with 4 online demos

Purpose of if else statement in JavaScript

In JavaScript and other programming languages, the if..else is a decision-making statement which is used to execute a block of code between two or more options based at certain condition.

The following section explains the structure of if else JavaScript statement followed by online examples.

Structure of JavaScript if else

If there is only one block of code to be checked before execution then you can use simple if statement or if statement with else.

The block inside if statement will execute if the given condition is true, otherwise, the code inside the else statement will execute. This is how you can use simple if..else statement in JS.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

If (Boolean_expression) {   //If above condition is true; the statement here will be executed e.g.   alert (“The condition is true”);   }   else {   //For false evaluation, this part will execute e.g.   alert (“The condition is false”);   }

 

If there are more blocks to be checked, you may use else if JavaScript statement, as shown below:

 

Now, let me show a few online examples of using simple if and if statement with else if.

A simple if statement example with else

In this example, I simply declared a numeric variable with an initial value. After that, I used an if condition where I checked if the value is less than or equal to ten? If the value is less than or equal to ten the condition will be true and a statement inside if block will execute. In that case, the statement is an alert that confirms the condition is true.

If the value is more than 10, the else part will execute that also shows an alert, confirming the condition was false. See the demo online (click the button to execute the if..else statement):

See online demo and code

As you click the button, the alert is shown. Following JS code is used at the click event of the button:

 

An example with user selected value

Now, the same example as above except a value selected by the user. In above example, the varA was simply assigned a static value so condition was always true.

In this example, select a value from the dropdown and then press the “Execute JS if statement” button. See the demo online:

See online demo and code

After you select a value from dropdown and press the button, a JavaScript function executes. The first line of code is to get the selected value from dropdown and assigning it to varA variable.

After that, the if..else statements are used where the value of varA is evaluated just like in above example. So, it the selected value is less than or equal to 10 then condition will be true and alert inside the if statement will be fired.

If the value is more than 10, the condition will be false and so the alert inside the else statement will be shown. Try it with different values and see the output yourself.

This JavaScript code is used in the function:

 

A demo of JavaScript else if statement with multiple conditions

In this demo, two things can be learned. One is how to use the else if statement i.e. evaluating multiple if statements. And the other is to use more than one conditions in a single if statement.

In above examples, I only used single condition:

varA >= 10

Sometimes you need two or more conditions to check in order to execute the single block. For example, check if the day is Sunday and time is between 10 am to 10 pm?

You may use logical operators to accomplish that, e.g.

(varA >= 10 && varB < 100)

The && means “AND” so, both of the above conditions has to be true in order to execute the statements inside the if statement in above condition.

If you want to execute code inside if statement if any of the condition is true then use OR operator:

(varA >= 10 || varB < 100)

A demo of this is shown in the following example, which has the same interface as above example but using multiple conditions. See the demo online and select different values:

See online demo and code

You can see, if a value is selected from 0 to 10, the first if conditions will be true that checks the limit between 0 and 10.

For 11 to 15, second if statement will execute which is done by using:

else if (varA >= 11 && varA <=15)

For 16 to 20, third and above 20 the else part will execute.

The complete code for the above example along with markup:

 

An if..else if example to set the document background color

Following is a more visual example to demonstrate the JavaScript if..else if..else statements where the background color of the document will be changed to the selected color.

See the online demo first, which is followed by a little description:

See online demo and code

First of all, the selected color is assigned to a variable in JS function, which is called at the click event of the button:

var seltheme = document.getElementById(“selecttheme”).value;

After that, if else statements are used where color values are checked. As a particular if or else if statement is true the code is executed to apply the selected color to the document background, e.g. if you select Maroon, this code will execute:

document.body.style.backgroundColor = “Maroon”;

The complete JS function code is:

 

You can see the complete code along with markup in the demo page.