Introduction to JavaScript elseIf
JavaScript elseIf is a Conditional Statement for Decision making in programming used to control the flow of execution of the lines of code based on certain specified conditions. If the condition is satisfied, the statement returns true and an action is performed else if the condition fails, another operation is performed. JavaScript elseIf statement is used to cause the flow of execution to branch based on changes to the lines of the program.
Basically, if is used to specify a block of code to be executed if the condition is true. Need to use else if the specific block of code to be executed if the condition if false. Here we use else if to specify the new conditions to be tested if the previous condition is false.
We have various conditional statements to perform different decisions,
- if: Specifying block of code to be executed if the condition is true
- else: Specifying block of code to be executed if the condition is false
- else if: Specifying new condition to be tested, if the first condition fails
- switch: Specifying alternative blocks of code to be executed
Syntax:
if ( condition1 ) {
//first block of code, will be executed if condition is true
} else if ( condition2 ) {
//code block executed if condition1 fails and condition2 is true
} else {
//code block to be executed if condition1 and condition2 is false
}
Examples of JavaScript elseIf
We shall see some examples with which you will get a clear idea of the use of else if:
Example #1
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript else If condition</h2>
<h3>Enter a number and Get your gift Here!!</h3>
<input id="input" type="text">
<button onclick="sampleElseIf()">Click Here</button>
<p id="demo"></p>
<script>
function sampleElseIf() {
var numbers = document.getElementById("input").value;
vargiftText;
// If number given is 2
if (numbers === "2") {
giftText = "You have won gold coin!!";
// If number given is 3 or 5, anyone
} else if (numbers === "3" || numbers === "5") {
giftText = "You have won 4 rupees!!";
}
else if (numbers === "7" || numbers === "100") {
giftText = "You have won 10 rupees!!";
// If the number is anything else
} else {
giftText = "You lost!!";
}
document.getElementById("demo").innerHTML = giftText;
}
</script>
</body>
</html>
Output:
So you need to enter any random number, based on the condition, text will be displayed.
4.5 (6,840 ratings)
View Course
Based on the if condition, and else if conditions, you can see the result above.
Example #2
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript else If condition</h2>
<p id="demo"></p>
<script>
var employee = "Karthick";
if( employee == "Jack" ) {
document.write("<b>Jack is the new employee</b>");
} else if( employee == "Karthick" ) {
document.write("<b>Karthick is the oldest employee</b>");
} else if( employee == "Saideep" ) {
document.write("<b>Saideep is a lateral employee</b>");
} else {
document.write("<b>He/ She is not an employee</b>");
}
</script>
</body>
</html>
Output:
Changing the employee value to ‘Juhi’, you can see that else condition has passed.
Example #3
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript else If condition</h2>
<p id="demo"></p>
<script>
var x=290;
if(x == 100){
document.write("Value of x is 100");
}
else if(x == 195){
document.write("Value of x is 195");
}
else if(x == 290){
document.write("value of x is 290");
}
else{
document.write("Value of x is not defined properly");
}
</script>
</body>
</html>
Output:
Am changing the value to 100, and here is the output,
Example #4
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript else IF condition</h2>
<h3>Click Here to get Greeting based on the Time</h3>
<button onclick="dateGreeting()">Try it</button>
<p id="demo"></p>
<script>
function dateGreeting() {
varsampleGreeting;
varsetTime = new Date().getHours();
if (setTime< 8 || setTime == 10) {
sampleGreeting = "Hey people! Good Morning";
} else if (setTime< 20) {
sampleGreeting = "Hey People! Good Afternoon";
} else if (setTime>= 16) {
sampleGreeting = "Hey People! Good Evening";
} else {
sampleGreeting = "You have entered into an Alien Zone!"
}
document.getElementById("demo").innerHTML = sampleGreeting;
}
</script>
</body>
</html>
Output:
After clicking on the button
Note: Executed at the time of 24:05, hence its Good Afternoon!!
Example #5
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript else If condition</h2>
<p id="demo"></p>
<script>
var x = 11;
if (x == 11) {
if (x < 15)
document.write("i is smaller than 15");
if (i< 12)
document.write("i is smaller than 12 too");
else if (x >= 11)
document.write("i is greater than 15");
}
else {
document.write("you have given a wrong number");
}
</script>
</body>
</html>
Output:
You can check with any other numbers.
Conclusion
With this we can conclude our topic ‘JavaScript elseIf’. We have seen this simple topic with few of the examples listed above. I hope you have understood those examples. Giving a good try with the above examples itself is enough to understand the Conditional Statements and their use. You can even take the help of Debug mode in your editor which will show the values that are being taken.
Recommended Articles
This is a guide to JavaScript elseIf. Here we discuss the introduction and syntax of javascript elseif along with different examples and its code implementation. You may also have a look at the following articles to learn more –
