Tutorials
Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
Javascript if, else if and else Statements
Javascript conditional statements allow you execute certain statements depending on if a condition is met. The if...else statement is one way to do this.
Javascript if statements
The javascript code below shows you a javascript if statement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<script type="text/javascript" language="javascript">
a = 5;
if (a = 5)
{
document.write("True");
}
</script>
</body>
</html>
The javascript code above produces the text "True", because the condition is met, "a" is equal to 5.
Javascript if...else statements
The javascript code below shows you a javascript if...else statement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<script type="text/javascript" language="javascript">
a = 5;
b = 10;
if (a < b)
{
document.write("True");
}
else if
{
document.write("False");
}
</script>
</body>
</html>
The javascript code above produces the text "True" because the variable "a", which is equal to 5, is less than the variable "b", which is equal 10.
Javascript if...else...else statements
The javascript below displays the current time (when the page is first visited or refreshed) and produces a different greeting based on what time of the day it is and shows you a javascript if...else...else statement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<script type="text/javascript" language="javascript">
document.write("The time is: ");
now = new Date();
hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();
document.write(hours + ":" + mins + ":" + secs);
if (hours < 10) document.write(" Good morning");
else if (hours >= 14 && hours <= 17) document.write(" Good afternoon");
else if (hours > 17) document.write(" Good evenning");
else document.write(" Good day");
</script>
</body>
</html>
The javascript code above produces the time and greeting below.