Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Conditional statements in JavaScript
Conditional statements allow you to execute different blocks of code based on specific conditions. JavaScript provides three main types of conditional statements to control program flow.
Types of Conditional Statements
- if statement ? Executes code only if a specific condition is true.
- if...else statement ? Checks one condition and executes different code blocks for true and false cases.
- if...else if...else statement ? Handles multiple conditions by checking them sequentially.
Syntax
// if statement
if (condition) {
// code to execute if condition is true
}
// if...else statement
if (condition) {
// code if condition is true
} else {
// code if condition is false
}
// if...else if...else statement
if (condition1) {
// code if condition1 is true
} else if (condition2) {
// code if condition2 is true
} else {
// code if all conditions are false
}
Example: Simple if Statement
<!DOCTYPE html>
<html>
<head>
<title>if Statement Example</title>
</head>
<body>
<script>
let age = 18;
if (age >= 18) {
document.write("You are eligible to vote.<br>");
}
document.write("Age checked: " + age);
</script>
</body>
</html>
You are eligible to vote. Age checked: 18
Example: if...else Statement
<!DOCTYPE html>
<html>
<head>
<title>if...else Example</title>
</head>
<body>
<script>
let number = 15;
if (number % 2 === 0) {
document.write(number + " is even.<br>");
} else {
document.write(number + " is odd.<br>");
}
document.write("Number checked: " + number);
</script>
</body>
</html>
15 is odd. Number checked: 15
Example: if...else if...else Statement
<!DOCTYPE html>
<html>
<head>
<title>Multiple Conditions Example</title>
</head>
<body>
<script>
let score = 85;
if (score >= 90) {
document.write("Grade: A<br>");
} else if (score >= 80) {
document.write("Grade: B<br>");
} else if (score >= 70) {
document.write("Grade: C<br>");
} else if (score >= 60) {
document.write("Grade: D<br>");
} else {
document.write("Grade: F<br>");
}
document.write("Score: " + score);
</script>
</body>
</html>
Grade: B Score: 85
Interactive Example: Number Divisibility Checker
<!DOCTYPE html>
<html>
<head>
<title>Divisibility Checker</title>
<style>
body { font-family: Arial, sans-serif; }
.result { color: blue; font-weight: bold; margin-top: 10px; }
input { padding: 5px; margin: 5px; }
button { padding: 8px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<h2>Number Divisibility Checker</h2>
<input type="number" id="numberInput" placeholder="Enter a number">
<button onclick="checkDivisibility()">CHECK</button>
<div class="result" id="result"></div>
<script>
function checkDivisibility() {
let number = parseInt(document.getElementById("numberInput").value);
let result = document.getElementById("result");
if (isNaN(number)) {
result.innerHTML = "Please enter a valid number.";
return;
}
if (number % 2 === 0 && number % 3 === 0) {
result.innerHTML = "The number " + number + " is divisible by both 2 and 3.";
} else if (number % 3 === 0) {
result.innerHTML = "The number " + number + " is divisible by 3 only.";
} else if (number % 2 === 0) {
result.innerHTML = "The number " + number + " is divisible by 2 only.";
} else {
result.innerHTML = "The number " + number + " is not divisible by 2 or 3.";
}
}
</script>
</body>
</html>
Key Points
- Conditions are evaluated as boolean expressions (true or false)
- Use comparison operators like
===,!==,>,<,>=,<= - Combine conditions using logical operators:
&&(AND),||(OR),!(NOT) - Only the first matching condition in an if...else if chain is executed
- The else block is optional and executes when no conditions are met
Conclusion
Conditional statements are fundamental for creating dynamic and responsive JavaScript applications. They enable your code to make decisions and execute different logic based on varying conditions and user inputs.
Updated on: 2026-03-15T23:18:59+05:30
2K+ Views
Advertisements