JavaScript if...else Statement

The JavaScript if...else statement is used to execute some block of code if the given condition evaluates to be true, otherwise executes some other block of code if the given condition evaluates to be false. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>
   
   <script>
      let x = 5;
      if(x%2 == 0)
         document.getElementById("xyz").innerHTML = "Even number";
      else
         document.getElementById("xyz").innerHTML = "Odd number";
   </script>
   
</body>
</html>

Output

JavaScript if...else Statement Syntax

The syntax of if...else statement in JavaScript, is:

if(condition) {
   // block of code to execute if condition evaluates to be true
}
else {
   // block of code to execute if condition evaluates to be false
}

JavaScript if...else Statement Example

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="abc"></p>
   
   <script>
      let a = 10, b = 20;
      if(b>a)
         document.getElementById("abc").innerHTML = "The value of 'b' is greater than 'a'";
      else
         document.getElementById("abc").innerHTML = "The value of 'b' is less than 'a'";
   </script>
   
</body>
</html>

Output

if...else with Multiple Conditions in JavaScript

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="myPara"></p>
   
   <script>
      let v = -10;
      if(v>0)
         document.getElementById("myPara").innerHTML = "Positive number";
      else if(v<0)
         document.getElementById("myPara").innerHTML = "Negative number";
      else if(v==0)
         document.getElementById("myPara").innerHTML = "Zero";
      else
         document.getElementById("myPara").innerHTML = "Not a number";
   </script>
   
</body>
</html>

Output

JavaScript if...else with Multiple Conditions Syntax

The syntax of if...else statement with multiple conditions in JavaScript, is:

if(condition_1) {
   // block of code to execute, if condition_1 evaluates to be true
}
else if(condition_2) {
   // block of code to execute, if condition_2 evaluates to be true
}
else if(condition_3) {
   // block of code to execute, if condition_3 evaluates to be true
}
.
.
.
else if(condition_N) {
   // block of code to execute, if condition_N evaluates to be true
}
else {
   // block of code to execute, if all conditions evaluates to be false
}

The checking of conditions, starts from first, then second, then third, and so on. If any condition evaluates to be true, then the block of code, available to that condition will be executed, and all the other conditions along with else will be skipped, without caring, whether any of the remaining condition also evaluates to be true. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="mypar"></p>
   
   <script>
      let myval = 10;
      if(myval<0) {
         document.getElementById("mypar").innerHTML = "Negative number";
      }
      else if(myval > 100) {
         document.getElementById("mypar").innerHTML = "Greater than 100";
      }
      else if(myval>0) {
         document.getElementById("mypar").innerHTML = "Positive number";
      }
      else if(myval == 10) {
         document.getElementById("mypar").innerHTML = "Equal to 10";
      }
      else if(myval == 0) {
         document.getElementById("mypar").innerHTML = "Equal to 0";
      }
      else {
         document.getElementById("mypar").innerHTML = "Not a number";
      }
   </script>
   
</body>
</html>

Output

The condition right after the myval>0, that is myval == 10 also a true one. But will not be executed, as a condition before it, already executed as true.

Nested if...else in JavaScript

An if...else inside another if...else statement considered as nested if...else statement. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>Largest = <span id="res"></span></p>
   
   <script>
      let m = 10, n = 8, o = 13, big;
      if(m>n)
      {
         if(n>o)
         {
            big = m;
         }
         else
         {
            if(o>m)
            {
               big = o;
            }
            else
            {
               big = m;
            }
         }
      }
      else
      {
         if(n>o)
         {
            big = n;
         }
         else
         {
            big = o;
         }
      }
      document.getElementById("res").innerHTML = big;
   </script>
   
</body>
</html>

Output

Largest =

JavaScript Online Test

« Previous Tutorial Next Tutorial »