Using Multi-level Conditionals | JavaScript and Ajax for the Web, Sixth Edition

There are times when you need more than two choices in a conditional test; then and else sometimes just aren't enough. While you can have nested levels of if , it's often simpler to just use a switch/case statement instead. The switch/case construct allows you to check a variable against multiple values. As you can see in Figure 3.7 , this script returns one of three different Presidential quotes as alert dialogs, depending on which button the user clicks. Script 3.11 shows the HTML, which is fairly simple. Script 3.12 , the JavaScript, uses the switch/case construct to differentiate between presidents .

Figure 3.7. Calling the function with each of the three buttons in the top window results in three different responses, as shown in the three dialog boxes.

Script 3.11. The HTML sets up the page for multi-level conditionals.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>      <title>Switch/Case handling</title>      <script language="Javascript" type="text/javascript" src="script09.js">      </script> </head> <body bgcolor="#FFFFFF"> <h2>Famous Presidential Quotes</h2> <form action="#">      <input type="button" value="Lincoln" />      <input type="button" value="Kennedy" />      <input type="button" value="Nixon" /> </form> </body> </html>

Script 3.12. This type of conditional allows you to check against multiple possibilities.

  window.onload = initAll;   function initAll() {   for (var i=0; i< document.forms[0]. elements.length; i++) {   var thisElement = document.forms[0]. elements[i];   if (thisElement.type == "button") {   thisElement.onclick = saySomething;   }  } }  function saySomething() {   switch(this.value) {   case "Lincoln":   alert("Four score and seven years ago...");   break;   case "Kennedy":   alert("Ask not what your country can do for you...");   break;   case "Nixon":   alert("I am not a crook!");   break;   default:   }  }

To use a switch/case statement:

1.	window.onload = initAll; When the page loads, call the `initAll()` function.
2.	function initAll() { for (var i=0; i< document.forms[0].elements.length; i++) { var thisElement = document.forms[0].elements[i]; if (thisElement.type == "button") { thisElement.onclick = saySomething; } In the function, we loop through all the fields in the form on the page. For each field, the loop looks at the type of field. If it's a button, then we add an `onclick` handler to call the `saySomething()` function.
3.	function saySomething() { This begins the `saySomething()` function.
4.	switch(this.value) { The value of the `this` object is used as the parameter to `switch()` . Its value will decide which of the below `case` statements gets executed.

5.	case "Lincoln": alert("Four score and seven years ago..."); break; If the value of the `this` object is "Lincoln", this alert appears. Regarding `break` , if the user clicked Lincoln, we're in this section of code. However, we've done everything we want to do, and so we want to get out of the `switch` . In order to do that, we need to `break` out. Otherwise, we'll execute all of the code below, too. While that continued execution can be handy in certain circumstances, this isn't one of them.
6.	case "Kennedy": alert("Ask not what your country can do for you..."); break; If the user clicked Kennedy, we end up in this `case` block.
7.	case "Nixon": alert("I am not a crook!"); break; And finally, if the user clicked Nixon, we end up here, popping up another alert and then breaking out of the `switch` .
8.	default: If you were wondering what would happen if the user's entry didn't meet one of the above criteria, you're in the right place. The `default` section is where we end up if our `switch` value didn't match any of the `case` values. The `default` block is optional, but it's always good coding practice to include it, just in case (so to speak). In this script, there's no code here to execute, because we shouldn't ever get here.
9.	} This closing brace ends the `switch` statement.

Tip

A switch statement can be passed other values besides strings. You can use it with a numeric value or even have it evaluate a mathematical result. If its result should be numeric, though, be sure that the case statements matchyour case statements need to be checking for numbers , not strings (e.g., 5, not "5").