- JavaScript Basics
- JavaScript Tutorial
- JavaScript: where to write
- JavaScript: how to display
- JavaScript: keywords
- JavaScript: comments
- JavaScript: variables
- JavaScript: operators
- JavaScript: data types
- JavaScript Conditional Statements
- JavaScript: if-else
- JavaScript: switch
- JavaScript: for loop
- JavaScript: while loop
- JavaScript: do-while loop
- JavaScript: break and continue
- JavaScript Popup Boxes
- JavaScript: alert box
- JavaScript: confirm box
- JavaScript: prompt box
- JavaScript Popular Topics
- JavaScript: functions
- JavaScript: innerHTML
- JavaScript: getElementById()
- JavaScript: getElementsByClassName()
- JavaScript: getElementsByName()
- JavaScript: getElementsByTagName()
- JavaScript: querySelector()
- JavaScript: querySelectorAll()
- JavaScript: document.write()
- JavaScript: console.log()
- JavaScript: boolean
- JavaScript: events
- JavaScript: Math object
- JavaScript: Math.random()
- JavaScript: Number()
- JavaScript: parseInt()
- JavaScript: parseFloat()
- JavaScript Arrays
- JavaScript: array
- JavaScript: find length of array
- JavaScript: add element at beginning
- JavaScript: add element at end
- JavaScript: remove first element
- JavaScript: remove last element
- JavaScript: get first index
- JavaScript: get last index
- JavaScript: reverse an array
- JavaScript: sort an array
- JavaScript: concatenate arrays
- JavaScript: join()
- JavaScript: toString()
- JavaScript: from()
- JavaScript: check if value exists
- JavaScript: check if array
- JavaScript: slice an array
- JavaScript: splice()
- JavaScript: find()
- JavaScript: findIndex()
- JavaScript: entries()
- JavaScript: every()
- JavaScript: fill()
- JavaScript: filter()
- JavaScript: forEach()
- JavaScript: map()
- JavaScript Strings
- JavaScript: string
- JavaScript: length of string
- JavaScript: convert to lowercase
- JavaScript: convert to uppercase
- JavaScript: string concatenation
- JavaScript: search()
- JavaScript: indexOf()
- JavaScript: search() vs. indexOf()
- JavaScript: match()
- JavaScript: match() vs. search()
- JavaScript: replace()
- JavaScript: toString()
- JavaScript: String()
- JavaScript: includes()
- JavaScript: substr()
- JavaScript: slice string
- JavaScript: charAt()
- JavaScript: repeat()
- JavaScript: split()
- JavaScript: charCodeAt()
- JavaScript: fromCharCode()
- JavaScript: startsWith()
- JavaScript: endsWith()
- JavaScript: trim()
- JavaScript: lastIndexOf()
- JavaScript Date and Time
- JavaScript: date and time
- JavaScript: Date()
- JavaScript: getFullYear()
- JavaScript: getMonth()
- JavaScript: getDate()
- JavaScript: getDay()
- JavaScript: getHours()
- JavaScript: getMinutes()
- JavaScript: getSeconds()
- JavaScript: getMilliseconds()
- JavaScript: getTime()
- JavaScript: getUTCFullYear()
- JavaScript: getUTCMonth()
- JavaScript: getUTCDate()
- JavaScript: getUTCDay()
- JavaScript: getUTCHours()
- JavaScript: getUTCMinutes()
- JavaScript: getUTCSeconds()
- JavaScript: getUTCMilliseconds()
- JavaScript: toDateString()
- JavaScript: toLocaleDateString()
- JavaScript: toLocaleTimeString()
- JavaScript: toLocaleString()
- JavaScript: toUTCString()
- JavaScript: getTimezoneOffset()
- JavaScript: toISOString()
- JavaScript Regular Expression
- JavaScript: regular expression
- JavaScript: RegEx . (dot)
- JavaScript: RegEx \w and \W
- JavaScript: RegEx \d and \D
- JavaScript: RegEx \s and \S
- JavaScript: RegEx \b and \B
- JavaScript: RegEx \0
- JavaScript: RegEx \n
- JavaScript: RegEx \xxx
- JavaScript: RegEx \xdd
- JavaScript: RegEx quantifiers
- JavaScript: RegEx test()
- JavaScript: RegEx lastIndex
- JavaScript: RegEx source
- JavaScript Programs
- JavaScript Programs
JavaScript if-else statements with example programs
If-else statements are the programming language's superheroes, swooping in to save the day when our code needs to make a decision. Without them, our programs would be frozen in indecision, unable to respond to changing conditions.
Understanding how if-else statements work is crucial for creating efficient and effective code. So in this article, I'll list conditional statements along with their definition and example programs. The conditional statements that are going to be covered in this post are:
The if statement in JavaScript
The if statement in JavaScript is used to execute some blocks of code only if the given condition evaluates to be true. For example:
<!DOCTYPE html> <html> <body> <p id="xyz"></p> <script> let x = 5; if(x%2 == 0) document.getElementById("xyz").innerHTML = "Even number"; </script> </body> </html>
In above example, the following statement:
document.getElementById("xyz").innerHTML = "Even number";
will be executed only if the following condition:
x%2 == 0
evaluates to be true. Since the condition x%2 == 0 or 5%2 == 0 or 1 == 0 evaluates to be false, nothing will be produced on the output.
JavaScript if statement syntax
The syntax of the if statement in JavaScript is:
if(condition) {
// block of code to execute if condition evaluates to be true
}
JavaScript if statement example
Consider the following code as an example demonstrating the use of the "if" statement in JavaScript:
<!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'"; </script> </body> </html>
The if inside another if is considered a nested if statement. For example:
<!DOCTYPE html> <html> <body> <p id="myPara"></p> <script> let m = 10; if(m>0) { if(m==10) { document.getElementById("myPara").innerHTML = "The value is 10"; } } </script> </body> </html>
The if-else statement in JavaScript
The JavaScript if-else statement is used to execute some block of code if the given condition evaluates to true or some other block of code if the given condition evaluates to false. For example:
<!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>
JavaScript if-else statement syntax
The syntax of the 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
Consider the following code as an example demonstrating the use of the if-else statement in JavaScript:
<!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>
if-else with multiple conditions in JavaScript
We can use the "if-else" statement to implement multiple conditions to execute a particular block of code associated with the condition that evaluates to true. For example:
<!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>
The syntax of an 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 with the first, then the second, then the third, and so on. If any condition evaluates to true, then the block of code associated with that condition will be executed, and all the other conditions along with the "else" will be skipped. For example:
<!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>
The condition right after the myval>0, that is, myval == 10, is also a true one, but will not be executed as a condition before it has already been executed as true. One more thing is that, if none of the mentioned conditions evaluates to true, then the block of code associated with the "else" will be executed.
Nested conditional statements in JavaScript
We can nest one conditional statement inside another. As an example:
<!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>
Largest = 13
« Previous Tutorial Next Tutorial »