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
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
Validate input data:
var x, text;
// Get the value of 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";
}
document.getElementById("demo").innerHTML = text;
Try it Yourself »
Related Pages
JavaScript Tutorial: JavaScript If...Else Statements
JavaScript Tutorial: JavaScript Switch Statement
JavaScript Statements Reference
Color Picker
