JavaScript if...else
Example
If the hour is less than 20, output "Good day":
let hour = new Date().getHours();
if (hour < 20) {
document.getElementById("demo").innerHTML = "Good day";
}
Try it Yourself »
Output "Good day" or "Good evening":
let hour = new Date().getHours();
if (hour < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
Try it Yourself »
More examples below.
Description
The if/else statement executes a block of code if a specified condition is true. If the condition is false, another block of code can be executed.
The if/else statement is a part of JavaScript's "Conditional" Statements, which are used to perform different actions based on different conditions.
In JavaScript we have the following conditional statements:
- Use if to specify a block of code to be executed, if a specified condition is true
- Use else to specify a block of code to be executed, if the same condition is false
- Use else if to specify a new condition to test, if the first condition is false
- Use switch to select one of many blocks of code to be executed
Syntax
The if statement specifies a block of code to be executed if a condition is true:
if (condition) {
// block of code to be executed if the condition is true
}
The else statement specifies 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
}
The else if statement specifies a new condition if the first condition is false:
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
}
Parameter Values
| Parameter | Description |
|---|---|
| condition | Required. An expression that evaluates to true or false |
More Examples
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":
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
Try it Yourself »
If the first <div> element in the document has an id of "myDIV", change its font-size:
var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {
x.style.fontSize = "30px";
}
Try it Yourself »
Change the value of the source attribute (src) of an <img> element, if the user clicks on the image:
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image = document.getElementById("myImage");
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
Try it Yourself »
Display a message based on user input:
var letter = document.getElementById("myInput").value;
var text;
// If the letter is "c"
if (letter === "c") {
text = "Spot on! Good job!";
// If the letter is "b" or "d"
} else if (letter === "b" || letter === "d") {
text = "Close, but not close enough.";
// If the letter is anything else
} else {
text = "Waaay off..";
}
Try it Yourself »
Validate input data:
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than 1 or greater than 10, output "input is not valid"
// If x is a number between 1 and 10, output "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
Try it Yourself »
Related Pages
JavaScript Tutorial: JavaScript If...Else Statements
JavaScript Tutorial: JavaScript Switch Statement
Browser Support
if...else is an ECMAScript1 (ES1) feature.
ES1 (JavaScript 1997) is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |
