JavaScript Conditional Statement : If, If-Else and If-Elseif-Else

The Conditional statements are used to decide the flow of execution based on different conditions. If a condition is true, then the code can perform one action and if the condition is false, then it perform another action. In JavaScript there are three conditional statements :

1. If statement
2. If...Else statement
3. If...Else if...Else statement

1. If statement :

The If statement is used to execute a set of code when a condition is true. The syntax of If Statement is :
if (condition) {
  code to be executed if condition is true
}
Example :
<!DOCTYPE html>
<html>
<head>
  <title>If Statement</title>
</head>
<body>
  <script>
    function if_statement() {
      text1 = document.getElementById("demo1");
      var age = prompt("Enter your Age : ");
      if (age > 18) {
        text1.innerText = "You are an Adult.";
      }

      if (age < 18) {
        text1.innerText = "You are not an Adult.";
      }
    }
  </script>

  <button type="button" onclick="if_statement()">Click Here </button>
  <p id="demo1"></p>
</body>
</html>
Output :




2. If...Else statement

The If...Else statement allows JavaScript to execute statements in a more controlled way. If the condition becomes true, execute block of code otherwise executes else block. The syntax of If...Else statement is :
if (condition) {
  code to be executed if condition is true
} else {
  code to be executed
}
Example :
<!DOCTYPE html>
<html>
<head>
  <title>If..Else Statement</title>
</head>
<body>
  <script>
    function ifElse_statement() {
      text2 = document.getElementById("demo2");
      var age = prompt("Enter your Age : ");
      if (age > 18) {
        text2.innerText = "You are an Adult.";
      } else {
        text2.innerText = "You are not an Adult.";
      }
    }
  </script>
  <button type="button" onclick="ifElse_statement()">Click Here</button>
  <p id="demo2"></p>
</body>
</html>
Output :




3. If...Else if...Else statement

The If...Else if...Else statement is allows to make a correct decision out of several conditions. Basically it evaluates the if condition and execute a block of code if expression become true, otherwise check the next else if condition and so on. If specified if...Else if condition does not satisfied, then the else block of code is executed. Syntax :
if (condition_1) {
  code to be executed if condition is true
} else if (condition_2) {
  code to be executed if condition is true
} else if (condition_3) {
  code to be executed if condition is true
} else {
  code to be executed
}
Example :
<html>
<head>
  <title>If..Else if...Else Statement</title>
</head>
<body>
  <script>
    function ifElseifElse_statement() {
      text3 = document.getElementById("demo3");
      var num = prompt("Enter your Number : ");
      if (num < 50) {
        text3.innerText = num + " is Less then 50.";
      } else if (num < 100) {
        text3.innerText = num + " is Less then 100.";
      } else {
        text3.innerText = num + " is Greater then 100.";
      }
    }
  </script>
<button type="button" onclick="ifElseifElse_statement()">Click Here</button>
<p id="demo3"></p>
</body>
</html>
Output :




Next Topic :