JavaScript if/else statement

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 can be executed.

The if/else statement is part of JavaScript's "conditional" statements, used to perform different operations based on different conditions.

In JavaScript, we have the following conditional statements:

  • Use if to specify a block of code to be executed if the specified condition is true
  • Use else to specify a block of code to be executed if the same condition is false
  • If the first condition is false, use else if to specify a new condition to be tested
  • Use switch to select one of multiple code blocks to be executed

Example

If the current time (HOUR) is less than 20:00, output "Good day" in the element with id="demo":

var time = new Date().getHours(); 
if (time < 20) {
  document.getElementById("demo").innerHTML = "Good day";
}

try it yourself

More TIY examples are available at the bottom of the page.

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 the code block to be executed when 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
}

If the first condition is false, the else if statement specifies a new condition:

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 value

Parameter Description
condition Required. An expression that evaluates to true or false.

Technical details

JavaScript version: ECMAScript 1

More examples

Example

If the time is less than 20:00, create a "Good day" greeting; otherwise, create a "Good evening":

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

try it yourself

Example

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

try it yourself

Example

If the id of the first <div> element in the document is "myDIV", change its font size:

var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {}} 
  x.style.fontSize = "30px";
}

try it yourself

Example

When the user clicks the image, change the value of the source attribute (src) of the <img> element:

<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 messages 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 "b" or "d"
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";
// If it is other letters
} else {
  text = "Waaay off..";
}

try it yourself

Example

Verify 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

browser support

statement Chrome IE Firefox Safari Opera
if/else Support Support Support Support Support

Related Pages

JavaScript Tutorial:JavaScript If...Else Statement

JavaScript Tutorial:JavaScript Switch Statement