EDUCBA

Home » Software Development » Software Development Tutorials » JavaScript Tutorial » JavaScript elseIf

JavaScript elseIf

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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;
var giftText;
// 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:

JavaScript elseIf-1.1

So you need to enter any random number, based on the condition, text will be displayed.

JavaScript elseIf-1.2

JavaScript elseIf-1.3

JavaScript elseIf-1.4

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:

JavaScript elseIf-2.1

Changing the employee value to ‘Juhi’, you can see that else condition has passed.

JavaScript elseIf-2.2

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:

Output-3.1

Am changing the value to 100, and here is the output,

Output-3.2

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() {
var sampleGreeting;
var setTime = 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:

Output-4.1

After clicking on the button

Output-4.2

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:

Output-5.1

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 –

  1. JavaScript Animation
  2. JavaScript Convert to JSON
  3. JavaScript Array Contain
  4. JavaScript onkeyup
0 Shares
Share
Tweet
Share
quiz