Purpose of if else statement in JavaScript
In JavaScript and other programming languages, the if..else is a decision-making statement that is used to execute a block of code between two or more options based on certain conditions.
var x = 10;
if (x > 5) {
console.log("x is greater than 5");
} else {
console.log("x is less than or equal to 5");
}
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 a simple if statement or if statement with else.
The block inside the 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 a 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 JavaScript else if 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. The 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 for a value selected by the user. In the above example, the varA was simply assigned a static value so the 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 the drop down and press the button, a JavaScript function executes.
- The first line of code is to get the selected value from the dropdown and assign it to varA variable.
- After that, the if..else statements are used where the value of varA is evaluated just like in the above example. So, if the selected value is less than or equal to 10 then the condition will be true, and an 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.
- First is how to use the else if statement i.e. evaluating multiple if statements.
- And the other is to use more than one condition in a single if statement.
In the above examples, I only used a single condition:
varA >= 10
Sometimes you need two or more conditions to check to execute the single block. For example, check if the day is Sunday and the time is between 10 am to 10 pm.You may use logical operators to accomplish that, e.g.
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:
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 that 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:
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 the JS function, which is called at the click event of the button:
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:
