JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript if, else, and else if
Conditional Statements
While writing the code, if you want certain actions to be performed actions for different decisions; you can use conditional statements.
In JavaScript we have the following conditional statements:
- Use if to define a block of code to be executed, if a mentioned condition is true.
- Use else to define a block of code to be executed if the same condition is false
- Use else if to define a new condition to test, if the first condition is false.
- Use switch to define many alternative blocks of code to be executed.
The if Statement
Use the if statement to define a block of JavaScript code to be executed if a condition is true.
Syntax
if (condition) {
// block of code to be executed if the condition is true
}
Example
Make a “Good day” greeting if the hour is less than 18:00:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if</h2>
<p>Display “Good day!” if the hour is less than 18:00:</p>
<p id=”demo”>Good Evening!</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById(“demo”).innerHTML = “Good day!”;
}
</script>
</body>
</html>
Output
JavaScript if
Display "Good day!" if the hour is less than 18:00:
Good Evening!
The else Statement
Use the else statement to define a block of code to be executed if the condition is false.
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
Example
If the hour is less than 18, create a “Good day” greeting, otherwise “Good evening”:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if .. else</h2>
<p>A time-based greeting:</p>
<p id=”demo”></p>
<script>
const hour = new Date().getHours();
let greeting;
if (hour < 18) {
greeting = “Good day”;
} else {
greeting = “Good evening”;
}
document.getElementById(“demo”).innerHTML = greeting;
</script>
</body>
</html>
Output
JavaScript if .. else
A time-based greeting:
Good day
The else if Statement
Use the else if statement to define a new condition if the first condition is false.
Syntax
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
Example
If time is less than 10:00, create a “Good morning” greeting, if not, but time is less than 20:00, create a “Good day” greeting, otherwise a “Good evening”:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if .. else</h2>
<p>A time-based greeting:</p>
<p id=”demo”></p>
<script>
const time = new Date().getHours();
let greeting;
if (time < 10) {
greeting = “Good morning”;
} else if (time < 20) {
greeting = “Good day”;
} else {
greeting = “Good evening”;
}
document.getElementById(“demo”).innerHTML = greeting;
</script>
</body>
</html>
Output
JavaScript if .. else
A time-based greeting:
Good day