JavaScript if/else
Statement
JavaScript Statement Reference Manual
Example
If the current time (hour) is less than 20:00, output "Good day" on the element with id="demo":
var time = new Date().getHours(); if (time < 20) {
document.getElementById("demo").innerHTML = "Good day";
}
Output result:
var d = new Date();
var time = d.getHours();
if (time < 20)
{
document.write("Good day");
}
More examples are included at the bottom of this article.
Definition and Usage
The if/else
statement executes a block of code if the specified condition is true. If the condition is false, another block of code can be executed.
The if/else
statement is part of JavaScript's conditional statements, which are used to perform different actions based on different conditions.
In JavaScript, we can use the following conditional statements:
- if statement - Executes the code block only if the specified condition is true.
- else statement - Executes the code block if the condition of the
if
statement is false. - else if statement - Checks a new condition if the first condition is false.
- switch statement - Selects one of many code blocks to execute.
Browser Support
Statement | Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
if/else | Yes | Yes | Yes | Yes | Yes |
Syntax
if statement specifies a block of code to be executed if the condition is true:
else statement specifies a block of code to be executed if the condition is false:
else if statement specifies a new condition to test if the first condition is false:
Parameter Values
Parameter | Description |
---|---|
condition | Required. An expression used for condition evaluation: true or false |
Technical Details
| JavaScript Version: | 1.0 | | --- | --- |
More Examples
Example
If the time is less than 20:00, generate a "Good day" greeting, otherwise output "Good evening":
var time = new Date().getHours(); if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
Greeting output result:
var d = new Date();
var time = d.getHours();
if (time < 20)
{
document.write("Good day");
}
else
{
document.write("Good evening");
}
Example
If the time is less than 10:00, output "Good morning" greeting, if the time is less than 20:00, output "Good day" greeting, otherwise output "Good evening":
var time = new Date().getHours(); if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
Greeting output result:
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning");
}
else if (time < 20)
{
document.write("Good day");
}
else
{
document.write("Good evening");
}
Example
Modify the font size of the first <div>
element with id equal to "myDIV":
var x = document.getElementsByTagName("DIV")[0]; if (x.id == "myDIV") { x.style.fontSize = "30px"; }
Example
Change the src
attribute of an <img>
element when 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>
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 x is less than 1 or greater than 10, output "Please enter a valid value"
// If x is between 1 and 10, output "Input correct"
if (isNaN(x) || x < 1 || x > 10) {
text = "Please enter a valid value";
} else {
text = "Input correct";
}
document.getElementById("demo").innerHTML = text;
Related Pages
JavaScript Tutorial: JavaScript If...Else Statement
JavaScript Tutorial: JavaScript Switch Statement