JavaScript if/else Statement
JavaScript Statements Reference
Example
If the current time (HOUR) is less than 20:00, output "Good day" in an element with id="demo":
var time = new Date().getHours();
if (time < 20) {
document.getElementById("demo").innerHTML = "Good day";
}
The result will be:
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
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
Browser Support
| Statement | |||||
|---|---|---|---|---|---|
| if/else | Yes | Yes | Yes | Yes | Yes |
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 |
Technical Details
| JavaScript Version: | 1.0 |
|---|
More Examples
Example
If the time is less than 20:00, create a "Good day" greeting, otherwise "Good evening":
var time = new Date().getHours();
if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
The result of greeting will be:
Try it Yourself »
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":
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
The result of greeting will be:
Try it Yourself »
Example
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 »
Example
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 »
Example
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 "c" or "e"
}
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 »
Example
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
JavaScript Statements Reference
