Latest web development tutorials
 

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

Examples

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