The if...else...if Statement
The if...else if construct can be used to test multiple
conditions without having to nest separate if...else statements inside
one another. These multiple tests are formed by using as many parallel
if...else if condition tests as there are conditions to be tested.
if (conditional expression1) {
do this...
} else if (conditional expression2) {
do this...
} else if (conditional expression3) {
do this...
}
...
[else {do this...}]
Figure 4-9. General format for if...else if statement.
If conditional expression1 is evaluated as true, then the
set of statements enclosed within the first set of braces is executed; if the expression is
evaluated as false, then conditional expression2 is evaluated.
If this expression is evaluated as true, then the set of statements
enclosed within the second set of braces is executed; if the expression is evaluated as
false, then conditional expression3 is evaluated, and so forth
for as many tests as are coded. The final, optional, else condition is
provided in case none of the previous tests is evaluated as true.
The following script is an example of the if...else if form of
condition testing in which one of four actions - addition, subtraction, multiplication, or
division - is taken on entered numbers depending on which button is clicked.
Figure 4-10. Testing conditions with if...else if statements.
window.onload = init;
function init() {
var BtnAdd = document.getElementById("");
var BtnSub = document.getElementById("");
var BtnMul = document.getElementById("");
var BtnDiv = document.getElementById("");
BtnAdd = Compute;
BtnSub = Compute;
BtnMul = Compute;
BtnDiv = Compute;
var txtAnswer = document.getElementById("");
txtAnswer.onfocus = blur();
}
function Compute() {
var No1 = document.getElementById("Number1").value;
var No2 = document.getElementById("Number2").value;
var Answer = document.getElementById("Answer");
if ( isNaN(No1) || isNaN(No2) || No1 == "" || No2 == "" ) {
alert("Please enter numbers in the text boxes.");
} else {
if (this.value == "+") {
Answer.value = parseFloat(No1) + parseFloat(No2);
} else if (this.value == "-") {
Answer.value = No1 - No2;
} else if (this.value == "*") {
Answer.value = No1 * No2;
} else if (this.value == "/") {
Answer.value = No1 / No2;
}
}
}
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td><input id="Number1" type="text"
style="width:50px; text-align:right"></td>
<tr>
<td><input type="button" value="+" style="width:20px"
id="BtnAdd">
<input type="button" value="-" style="width:20px"
id="BtnSub">
<input type="button" value="*" style="width:20px"
id="BtnMul">
<input type="button" value="/" style="width:20px"
id="BtnDiv">
</td>
<td><input id="Number2" type="text"
style="width:50px; text-align:right"/></td>
</tr>
<tr>
<td></td>
<td>--------</td>
</tr>
<tr>
<td style="text-align:right">= </td>
<td><input id="Answer" type="text" style="width:50px; text-align:right"
id="txtAnswer"></td>
</tr>
</table>
Listing 4-8. Code to test conditions with if...else if statements.
The clicked button calls the Compute() function, passing the
value (this.value) of the button. The function receives the passed
value ("+", "-", "*",
or "/") as argument Operator, which indicates
the operation to perform.
First, the script saves the values of the two input textboxes as variables
No1 and No2; it saves a reference to the output textbox as variable
Answer. The reason for assigning these references to variables is to
simplify the coding with short variable names rather lengthy references.
An initial test is made to ensure that the entered values are numbers. If either of the values
is not a number or if either of the values is null, an error message is displayed.
if ( isNaN(No1) || isNaN(No2) || No1 == "" || No2 == "" ) {
alert("Please enter numbers in the text boxes.");
}
With assurance that only numbers are entered into the textboxes, the script tests the
value the current button referenced bythis.value to determine which arithmetic operation
to carry out.
if (Operator == "+") {
Answer.value = parseFloat(No1) + parseFloat(No2);
} else if (Operator == "-") {
Answer.value = No1 - No2;
} else if (Operator == "*") {
Answer.value = No1 * No2;
} else if (Operator == "/") {
Answer.value = No1 / No2;
}
The result of the operation is assigned to Answer.value, the saved
shortcut reference to document.getElementById("Answer").value. Note that
for addition the two input values are converted to numbers with
parseFloat(); otherwise they would be concatenated since textbox values are strings.
No explicit conversion is needed for the other operations since JavaScript automatically
converts them to numbers if the input string is composed only of numerals.
It is notable in this example that the Operator argument is
an actual arithmetic operator. This operator, along with the input values, can be concatenated
to compose an arithmetic expression that is evaluated with the eval()
method. This alternative to the above script is shown below.
function Compute() {
var No1 = document.getElementById("Number1").value;
var No2 = document.getElementById("Number2").value;
var Answer = document.getElementById("Answer");
if ( isNaN(No1) || isNaN(No2) || No1 == "" || No2 == "" ) {
alert("Please enter numbers in the text boxes.");
} else {
Answer.value = eval(parseFloat(No1) + this.value + parseFloat(No2));
}
}
Listing 4-9. Using eval() method to evaluate an arithmetic expression.
The value of variable No1 is concatenated with the value of
this (the reference to the current button) and with the value of variable
No2. If, for example, the numbers 5 and 7
are entered into the textboxes and the "+" button is clicked, the
concatenation produces the string "5 + 7", which is a valid arithmetic
expression. This expression can be evaluated with eval() to produce
the calculated result for assignment to the output textbox.