JS If Else

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript if, else, and else if

Conditional Statements

While writing the code, if you want certain actions to be performed actions for different decisions; you can use conditional statements.

In JavaScript we have the following conditional statements:

  • Use if to define a block of code to be executed, if a mentioned condition is true.
  • Use else to define a block of code to be executed if the same condition is false
  • Use else if to define a new condition to test, if the first condition is false.
  • Use switch to define many alternative blocks of code to be executed.

The if Statement

Use the if statement to define 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

}

Example

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

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript if</h2>

<p>Display “Good day!” if the hour is less than 18:00:</p>

<p id=”demo”>Good Evening!</p>

<script>

if (new Date().getHours() < 18) {

 document.getElementById(“demo”).innerHTML = “Good day!”;

}

</script>

</body>

</html>

Output

JavaScript if

Display "Good day!" if the hour is less than 18:00:

Good Evening!

The else Statement

Use the else statement to define 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”:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript if .. else</h2>

<p>A time-based greeting:</p>

<p id=”demo”></p>

<script>

const hour = new Date().getHours();

let greeting;

if (hour < 18) {

  greeting = “Good day”;

} else {

  greeting = “Good evening”;

}

document.getElementById(“demo”).innerHTML = greeting;

</script>

</body>

</html>

Output

JavaScript if .. else

A time-based greeting:

Good day

The else if Statement

Use the else if statement to define 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”:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript if .. else</h2>

<p>A time-based greeting:</p>

<p id=”demo”></p>

<script>

const time = new Date().getHours();

let greeting;

if (time < 10) {

  greeting = “Good morning”;

} else if (time < 20) {

  greeting = “Good day”;

} else {

  greeting = “Good evening”;

}

document.getElementById(“demo”).innerHTML = greeting;

</script>

</body>

</html>

Output

JavaScript if .. else

A time-based greeting:

Good day