If else statement in javascript

Conditional statements are used to perform different actions based on different conditions.

Conditional Statements

Very often when you write code, you want to perform different actions for different decisions.

You can use conditional statements in your code to do this.

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 specify many alternative blocks of code to be executed

The switch statement is described in the next chapter.

The if Statement

Use the if statement to specify a block of JavaScript code to be executed if a condition is true.

Syntax

if [condition] {
  //  block of code to be executed if the condition is true
}

Note that if is in lowercase letters. Uppercase letters [If or IF] will generate a JavaScript error.

Example

Make a "Good day" greeting if the hour is less than 18:00:

if [hour < 18] {
  greeting = "Good day";
}

The result of greeting will be:

Try it Yourself »

The else Statement

Use the else statement to specify 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
}

Example

If the hour is less than 18, create a "Good day" greeting, otherwise "Good evening":

if [hour < 18] {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

The result of greeting will be:

Try it Yourself »

The else if Statement

Use the else if statement to specify a new condition if the first condition is false.

Syntax

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
}

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":

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 »

More Examples

Random link
This example will write a link to either W3Schools or to the World Wildlife Foundation [WWF]. By using a random number, there is a 50% chance for each of the links.


Example

If the hour is less than 20, output "Good day":

let hour = new Date[].getHours[];
if [hour < 20] {
  document.getElementById["demo"].innerHTML = "Good day";
}

Try it Yourself »

Output "Good day" or "Good evening":

let hour = new Date[].getHours[];
if [hour < 20] {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

Try it Yourself »

More 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

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

ParameterDescription
condition Required. An expression that evaluates to true or false

More Examples

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

Try it Yourself »

If the first

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 »

Change the value of the source attribute [src] of an


function changeImage[] {
  var image = document.getElementById["myImage"];
  if [image.src.match["bulbon"]] {
    image.src = "pic_bulboff.gif";
  } else {
    image.src = "pic_bulbon.gif";
  }
}

Try it Yourself »

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 "b" or "d"
} 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 »

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

Browser Support

if...else is an ECMAScript1 [ES1] feature.

ES1 [JavaScript 1997] is fully supported in all browsers:

Chrome IE Edge Firefox Safari Opera
Yes Yes Yes Yes Yes Yes

What is if else statement in JavaScript?

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.

What is the syntax of if else?

Syntax. If the Boolean expression evaluates to true, then the if block will be executed, otherwise, the else block will be executed. C programming language assumes any non-zero and non-null values as true, and if it is either zero or null, then it is assumed as false value.

What is if else if used for?

The if/else if statement allows you to create a chain of if statements. The if statements are evaluated in order until one of the if expressions is true or the end of the if/else if chain is reached. If the end of the if/else if chain is reached without a true expression, no code blocks are executed.

Does Elif exist in JavaScript?

In JavaScript's if-then-else there is technically no elseif branch.

Chủ Đề