The switch Statement

An alternative to the if...else if construct can be used to simplify multiple condition tests where an expression evaluates to discrete string or numeric values. These multiple tests are formed by using the switch statement with case entries testing for expected values and providing processing code on a match.

switch (expression) {
  case "value1":
    do this...
    break;
	
  case "value2":
    do this...
    break;
	
  case "value3":
    do this...
    break;
	
  ...
  
  [
  default:
    do this...
    break;
  ]
}

Figure 4-11. General format for switch statement.

The expression tested in the switch statement evalutes to a string or numeric value. Then, a branch is made to the case entry matching the value. Each group of statements inside a case entry ends with a break statement to exit case processing. If the expression evaluates to a value that does not have an associated case, then default processing is performed.

The following example is a rewrite of the previous if...else if script using a switch statement to test the arithmetic operators and make appropriate calculations.

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 {
    switch (this.value) {
      case "+":
        Answer.value = parseFloat(No1) + parseFloat(No2);
        break;
      case "-":
        Answer.value = No1 - No2;
        break;
      case "*":
        Answer.value = No1 * No2;
        break;
      case "/":
        Answer.value = No1 / No2;
        break;
    }
  }
}

</script>

<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">&nbsp;
  </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">=&nbsp;</td>
  <td><input id="Answer" type="text" style="width:50px; text-align:right"
        id="txtAnswer"></td>
</tr>
</table>

Listing 4-10. Code to test conditions with a switch statement.

The switch statement tests the Operator variable. One of four string values is detected: "+", "-", "*", or "/". The script branches to the matching case entry and performs the arithmetic, exiting the case at its break statement.

TOP | NEXT: Chapter 5 - Script Iterations