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 on certain conditions.
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.
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:
If (Boolean_condition) {
//If first condition is true; the statement here will be executed e.g.
alert (“The first block statements will execute!”);
}
else if {
//If second condition is true; the statement here will be executed e.g.
alert (“The second block statements will execute”);
}
else if {
//If third condition is true; the statement here will be executed e.g.
alert (“The third block statements will execute”);
}
else {
//For false evaluation, this part will execute e.g.
alert (“None of the above condition evaluated as true!”);
}
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 and also show an alert, confirming the condition was false. Copy/paste the code below (click the button to execute the if..else statement):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ifelsefunction() {
var varA = 10;
if(varA <= 10){
alert ("The value is less than or equal to 10, so condition is true!");
}
else{
alert ("The condition is false!")
}
}
</script>
<style>
.ifelsediv {
background: #415665;
height: 75px;
width:200px;
border-radius: 15px;
padding:20px;
font-size:22px;
color:#fff;
}
</style>
</head>
<body>
<div class="ifelsediv"> varA = 10;
<button onclick="ifelsefunction()">Check if varA value is less than or equal to 10?</button>
</div>
</body>
</html>
Sample Output:
As you click the button, the alert is shown. Following JS code is used at the click event of the button:
<script type="text/javascript">
function ifelsefunction() {
var varA = 10;
if(varA <= 10){
alert ("The value is less than or equal to 10, so condition is true!");
}
else{
alert ("The condition is false!")
}
}
</script>
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.
HTML and JS
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ifelsefunction() {
var varA = parseInt(document.getElementById("selectvalue").value);
if(varA <= 10){
alert ("The value is less than or equal to 10, so condition is true!");
}
else{
alert ("The condition is false!")
}
}
</script>
<style>
.ifelsediv {
background: #415665;
height: 75px;
width:200px;
border-radius: 15px;
padding:20px;
font-size:22px;
color:#fff;
}
</style>
</head>
<body>
<div class="ifelsediv">
<label>Select a value: </label><select id="selectvalue">
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
<option>25</option>
</select>
<button onclick="ifelsefunction()">Execute JS if statement</button>
</div>
</body>
</html>
Sample output:
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:
function ifelsefunction() {
var varA = parseInt(document.getElementById("selectvalue").value);
if(varA <= 10){
alert ("The value is less than or equal to 10, so condition is true!");
}
else{
alert ("The condition is false!")
}
}
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.
Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ifelsefunction() {
var varA = parseInt(document.getElementById("selectvalue").value);
if(varA >= 0 && varA <=10){
alert ("The selected value is between 0 to 10!");
}
else if (varA >= 11 && varA <=15){
alert ("The selected value is between 10 to 15!");
}
else if (varA >= 16 && varA <=20){
alert ("The selected value is between 16 to 20!");
}
else{
alert ("The selected value is above 20!")
}
}
</script>
<style>
.ifelsediv {
background: #415665;
height: 75px;
width:200px;
border-radius: 15px;
padding:20px;
font-size:22px;
color:#fff;
}
</style>
</head>
<body>
<div class="ifelsediv">
<label>Select a value: </label><select id="selectvalue">
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
<option>25</option>
</select>
<button onclick="ifelsefunction()">Execute JS if statement</button>
</div>
</body>
</html>
Output as we selected 20:
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.
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.
Complete code for this example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ifelsefunction() {
var seltheme = document.getElementById("selecttheme").value;
if(seltheme == "Maroon"){
document.body.style.backgroundColor = "Maroon";
}
else if (seltheme == "Green"){
document.body.style.backgroundColor = "Green";
}
else if (seltheme == "Blue"){
document.body.style.backgroundColor = "Blue";
}
else if (seltheme == "Red"){
document.body.style.backgroundColor = "Red";
}
else if (seltheme == "Yellow"){
document.body.style.backgroundColor = "Yellow";
}
else{
document.body.style.backgroundColor = "White";
}
}
</script>
<style>
.ifelsediv {
background: #D26900;
height: 75px;
width:200px;
border-radius: 15px;
padding:20px;
font-size:22px;
color:#fff;
}
</style>
</head>
<body>
<div class="ifelsediv">
<label>Select A Color: </label><select id="selecttheme">
<option value="Maroon">Maroon</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="White">Other</option>
</select>
<button onclick="ifelsefunction()">Execute JS if statement</button>
</div>
</body>
</html>
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”;