JavaScript: if...else statements

Last update on August 19 2022 21:51:08 (UTC/GMT +8 hours)

Conditional Statement

A conditional statement is a set of commands and the commands execute if a specified condition is true. There are two conditional statements in JavaScript : if...else and switch.

JavaScript if...else statement

Executes a group of statements if a logical condition is true. Use the optional else clause to execute another group of statements.

Syntax

For single statement:
if (condition)
statement_1 
[else
statement_2]

Example:

In the following example if else statement check whether an input marks is greater than 50 or not.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>JavaScript if  else statement :  Example-1</title>
</head>
<body>
<h1 style="color: red">JavaScript : if else statement</h1>
<h3>Here the if  else statement check whether the input marks is greater than 50 or not.</h3>
<hr />
<form name="form1" action ="#">
Input the marks<input type="text" name="text1" value=" " />
<input type="button" value="Marks check"
onclick='marksgrade()' />
</form>
<script src="if-else-example1.js"></script>
</body>
</html>

JS Code

function marksgrade()
{
if (document.form1.text1.value>50)
console.log('Marks is greater than 50.');
else
console.log('Marks is less than or equal to 50.');
}

View the example in the browser

JavaScript if...else if statement

For multiple conditions, we can use else if.

Syntax

if (condition_1)

statement_1

[else if (condition_2)

statement_2]

...

[else if (condition_n_1)

statement_n_1]

[else

statement_n]

Parameters

condition_1, condition_2 : Can be any JavaScript expression that evaluates to true or false. Parentheses are required around the condition. If the condition evaluates to true, the statements in statement_1 are executed, otherwise, statement_2 is executed.

statements_1, statements_2 : Can be any JavaScript statements, including further nested if statements.

It is a good practice to use a block statement ( {....}) to execute multiple statements. See the following syntax :

Syntax

if (condition_1)

{

statements_1

}

else

if (condition_2)

{

statements_2

}

Example:

Here the if else if.. statement checks the grade of Math. on some conditions.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>JavaScript if  else if... statement :  Example-1</title>
</head>
<body>
<h1 style="color: red">JavaScript : if else if statement</h1>
<h3>Here the if  else if.. statement check the grade of Math. with following condition : </h3>
<hr />
<p style="color:green;font-weight:bold">A+ (marks>=90) : A (marks>=80 and marks<90) : B+ (marks>=70 and marks<80) : B (marks>=60 
and marks<70) : C (marks<60) </p>
<form name="form1" action ="#">
Input the Math. marks<input type="text" name="text1" value=" " />
<br /><br />

<input type="button" value="Marks check"
onclick='marksgrade()' />
</form>
<script src="if-else-if-example1.js"></script>
</body>
</html>

JS Code

function marksgrade()
{
if (document.form1.text1.value >=90)
alert('Grade A+');
else
if (document.form1.text1.value >=80 && document.form1.text1.value <90)
{
alert('Grade A');
}
else
if (document.form1.text1.value >=70 && document.form1.text1.value <80)
{
alert('Grade B+');
}
else
if (document.form1.text1.value >=60 && document.form1.text1.value <70)
{
alert('Grade B');
}
else
alert('Grade C');
}

View the example in the browser

Practice the example online

See the Pen javascript-common-editor by w3resource (@w3resource) on CodePen.

JavaScript nesting if statements

Putting one if statement inside another if statement is called nesting. See the following syntax:

Syntax

if (condition)

{

if (condition)

{

if (condition)

{

statement_1

}

else

{

statement_2

}

else

{

statement_3

}

Previous: JavaScript: Block statement
Next: JavaScript: Switch statement