Free Javascript Tutorials

home

JavaScript Tutorials

If ... Else

 
Our quick javascript links
Little Programmes
 
 
 
 
 
 

 

if … else statements

 

We saw in the last part of this Control Flow section that to test two conditions (true and false) two if statements were needed. But you don't have to use separate if statements. Instead, you can use the else word. This is ideal for Boolean values. Here's our code again, this time with an if … else statement.

ConfirmStatus = confirm("Format Your Hard Drive?")

if (ConfirmStatus == true) {

alert("Formatting Hard Drive Now")

}

else {

alert("Tough! Formatting Hard Drive anyway")

}

The first if statement is exactly the same. Now, though, instead of our second if statement to test for a false condition, we've used the word else. The format for an if … else statement is this:

if (condition to test) {

Statement 1

}
else {

Statement 2

}

So if the first statement isn't true, the code beneath else gets executed.

 

if … else if

If you need multiple if statements, then if … else if is the one to use. In the code below, we'll check to see what number is in a text box. Depending on which number was typed in, we'll display an appropriate (or inappropriate) message. First, you're going to need a few more symbols to work with. You've already met the double equals symbol (==), and know that this means "has a value of". Here's some more.

>

<

<=

>=

!=

&&

||

 

Greater than

Less than

Less than or equal to

Greater than or equal to

Not equal to

Evaluation And

Evaluation Or

We'll see how these operators work with our next little programme. So design an HTML page with the following form on it.

<FORM NAME = "AgeTest">

Type in your age, then click the button:
<INPUT TYPE = Text NAME = txtAge Size = 15>
<INPUT TYPE = Button NAME = "b1" VALUE = "Age Tester" onClick = message()>

</FORM>

Once you've typed the HTML code for the form, type this JavaScript code in the HEAD section of your page:

<SCRIPT language = javascript>

function message() {

age = document.AgeTest.txtAge.value

if (age < 16) {

alert("How's school these days?")

}
else if(age > 16) {

alert("It's tough being an adult")

}
}

</SCRIPT>

We had another onClick event for our command button, which called the message( ) function. When the message( ) is called, it first stores the value in the text box into a variable called age.

age = document.AgeTest.txtAge.value

Next, we need to test what is inside the age variable. We started the test with an if statement:

if (age < 16) {

alert("How's school these days?")

}

Notice one of our new symbols in the "condition to test":

age < 16

If the value stored in the variable age is less than 16, then the condition will be true. If the condition is true then our statement will get executed. The statement was an alert box:

alert("How's school these days?")

Next, because we're checking for multiple values, we have the else if condition. Ours was this:

if (age < 16) {

alert("How's school these days?")

}
else if(age > 16) {

alert("It's tough being an adult")

}


The format for the else if part is this:

if (condition to test) {

statement 1

}
else if(condition to test) {

statement 1

}

It's just another if statement with the word else in front of it (type a space after the word else). You can add as many else if conditions as you want. You can also add an ordinary else statement at the end, just to trap anything not met by your conditions. After all, somebody might type text into your text box, or minus numbers, or nothing at all. In which case, this could solve your problems (though it's no substitute for more thorough error checking):

if (age < 16) {

alert("How's school these days?")

}
else if(age > 16) {

alert("It's tough being an adult")

}
else {

alert("Please try again")

}


We haven't finished with this part yet, so you need to click below to continue the lesson.

Move on to the Next Part -->

<--Back to the JavaScript Contents Page