JavaScript if/elseStatement

JavaScript 语句参考手册 JavaScript Statement Reference

Examples

If the current time (hours) 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:

More examples are included at the bottom of this article.

Definition and Usage

The if/else statement executes a block of code when the specified condition is true. If the condition is false, another block of code will 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- Use this statement to execute code only when the specified condition is true.
else statementExecutes this block of code if the condition of the if statement is false.
else if statement- Test a new condition, if the first condition is false.
switchstatement- Select one of many code blocks to execute.

Browser Support

Statement
if/else	Yes	Yes	Yes	Yes	Yes

Syntax

ifThe statement specifies the block of code to be executed when the condition is true:

if (condition) {
Execute this block of code if condition is true.
}

elseThe statement specifies the block of code to be executed when the condition is false:

if (condition) {
Execute this block of code if condition is true.
} else {
Execute this block of code if condition is false.
}

else ifThe statement specifies a new condition when the first condition is false:

if (condition1) {
Execute this block of code if condition1 is true.
} else if (condition2) {
Execute this block of code if condition1 is false and condition2 is true.
} else {
Execute this block of code if condition1 is false and condition2 is false.
}

Parameter Values

Parameter	Description
condition	Required. Expression to be evaluated for the condition: 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";
}

The output result of the greeting is:

var d=new Date(); var time=d.getHours(); if (time<20) { document.write("Good day"); } else { document.write("Good evening"); }

Try it yourself »

Example

If the time is less than 10:00, output a "Good morning" greeting; if the time is less than 20:00, output a "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";
}

The greeting output result is:

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"); }

Try it yourself »

Example

Change the font size of the first <div> element in the document with id equal to "myDIV":

var x = document.getElementsByTagName("DIV")[0];

if (x.id == "myDIV") {
x.style.fontSize = "30px";
}

Try it yourself »

Example

Modify the src attribute of the <img> element when the user clicks on the image:

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif.html" 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 the 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 x is greater than 10, output "Please enter a valid value"
// If the value of 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;

Try it yourself »

JavaScript Tutorial:JavaScript If...Else Statement

JavaScript Tutorial:JavaScript Switch Statement