JavaScript if, else, and else if

❮ Previous Next ❯

Conditional Statements

Frequently, when you write code, you need to do various things based on different choices.

You can use if statements in your code to achieve this.

In JavaScript, we use certain 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

You can use the if statement in JavaScript to run a specific set of code when a certain condition is met.

Syntax

if (condition) {
// block of code to be executed if the condition is true
}

Note that if is in lowercase letters. Capital letters (if or IF) can cause a JavaScript error.

The else Statement

You can use the if statement in JavaScript to run a specific set of code when a certain condition is met.

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

You can use the else if statement to set up an additional condition when the initial condition turns out to be untrue.

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
}

<!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>

<!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>

<!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>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

JavaScript if, else, and else if

Conditional Statements

The if Statement

Syntax

The else Statement

The else if Statement

Syntax

Web Development