Statement Syntax
In the same way there is proper syntax for a function, there is also proper syntax for a statement. In JavaScript there are several different kinds of statements and each kind has its own specific syntax. In this project we will be focusing on the use of switch statements.
According to the W3Schools, "A switch statement is a block of statements to be executed, depending on different cases." Here is the basic syntax of a switch statement.
switch (expression) {
case label:
statements;
break;
case label:
statements;
break;
case label:
statements;
break;
defaualt:
statements;
break;
}
Let's take a look at the construction of a switch statement used in conjunction with a drop down menu. Below I've built a simple drop down menu that lets the user choose from three ice cream flavors. A different message is displayed depending on which option the user chooses.
Let's take a look at the switch statement for this user interaction. I have put the switch statement inside a function named iceCreamMessage.
function iceCreamMessage() {
var flavorChoice = document.getElementById("chooseFlavor").value;
switch (flavorChoice) {
case "lavender":
document.getElementById("showMessage").innerHTML =
"Love that lavender!";
break;
case "lemonSorbet":
document.getElementById("showMessage").innerHTML =
"When life gives you lemons, make lemon sorbet!";
break;
case "saltedCaramel":
document.getElementById("showMessage").innerHTML =
"Try an affogato shot with this one!";
break;
default:
document.getElementById("showMessage").innerHTML = " ";
break;
}
}
Notice that above the switch statement and inside the function curly brackets, I declared a variable flavorChoice that is assigned the value of the chosen selection. The web browser looks inside the HTML document inside the element with id="chooseFlavor" to find this value. The three possible values are lavender, lemonSorbet, and saltedCaramel.
The expression document.getElementById("showMessage").innerHTML tells the browser to show the message that comes after this code, so for case "lavender", this message is "Love that lavender!", for case "lemonSorbet" this message is "When life gives you lemons, make lemon sorbet!", and for case "saltedCaramel" this message is "Try an affogato shot with this one!"
This message will be placed on the page in the location for the div element with id="showMessage".
Putting It Togethetr
To make it all work, we will create a JavaScript file called flavor.js and save it inside a folder names js. At the top we'll put our function. Then we will include the following createEventListener function and the code that tells the browser to call that function when the page loads.
function createEventListeners() {
var chooseFlavor = document.getElementById("chooseFlavor");
chooseFlavor.addEventListener ("change", iceCreamMessage, false);
}
window.addEventListener("load", createEventListeners, false);
Next we will add a line of code to the HTML document that tells the browser to load the flavor.js file. This code goes just before the closing body tag.
<script src="js/flavors.js"></script>
Last we must add two more code snippets. The first is a function to remove lavender as the default selection in our drop down menu. It's beyond the scope of this tutorial to explain this code, but for our function to work it needs to be in our flavors.js document.
function removeSelectionDefaults() {
var noDefaults = document.getElementsByTagName("select");
for (var i = 0; i < noDefaults.length; i++) {
noDefaults[i].selectedIndex = -1;
}
}
The second is a line of code that tells the browser to run the removeSelectionDefaults() function when the page loads.
window.addEventListener("load", removeSelectionDefaults, false);
If you want to see this code in action, make a selection from the ice cream flavor drop down menu above.
The Chord Calculator
Now lets see how all this works in our chord calculator project.
Switch Statements
We will need two switch statements for this project. First we will need a switch statement that switches out the variable scale for a different array based on the value chosen by the user from the scale drop down menu. If the user selects the C scale from the drop down menu, the switch statement will assign the scale variable to be scaleC. Here is that code enclosed in the function showChord. Take note of the variable declaration just before the switch statement.
function showChord() {
var scaleChoice = document.getElementById("chooseScale").value;
switch (scaleChoice) {
case "scaleFsharp":
var scale = scaleFsharp;
break;
case "scaleB":
var scale = scaleB;
break;
case "scaleE":
var scale = scaleE;
break;
case "scaleA":
var scale = scaleA;
break;
case "scaleD":
var scale = scaleD;
break;
case "scaleG":
var scale = scaleG;
break;
case "scaleC":
var scale = scaleC;
break;
case "scaleF":
var scale = scaleF;
break;
case "scaleBb":
var scale = scaleBb;
break;
case "scaleEb":
var scale = scaleEb;
break;
case "scaleAb":
var scale = scaleAb;
break;
case "scaleDb":
var scale = scaleDb;
break;
default:
var scale = scaleDegrees;
break;
}
}
The second switch statement we will need checks the selected chord scale value and applies a different output for each case, so if, for example, the user selects a minor chord, the values for the array indexes [0], [3], and [7] are outputted to the web page. If this isn't making sense, you can take a sneak peek at the demo page, and it may make more sense. I'll be right here when you get back. If you like surprises, then lets plow on.
This second switch statement is included in the same function showChord. There are 22 chords in the chord calculator, so this switch statement is very long. I will only show the code for four chords, but that should be enough for you to get a vision for the entire statement.
var chordChoice = document.getElementById("chooseChord").value;
switch (chordChoice) {
case "major":
document.getElementById("showChord").innerHTML = scale[0]
+ " = " + scale[0] + ", " + scale[4] + ", " + scale[7];
break;
case "m":
document.getElementById("showChord").innerHTML = scale[0] + chordChoice
+ " = " + scale[0] + ", " + scale[3] + ", " + scale[7];
break;
case "dim":
document.getElementById("showChord").innerHTML = scale[0] + chordChoice
+ " = " + scale[0] + ", " + scale[3] + ", " + scale[6];
break;
case "+":
document.getElementById("showChord").innerHTML = scale[0] + chordChoice
+ " = " + scale[0] + ", " + scale[4] + ", " + scale[8];
break;
default:
break;
}
Event Handlers
As in the ice cream flavor example, we will need to set up event handlers to listen for the user selections from the chooseScale and chooseChord drop down menus. Here is that code.
function createEventListeners() {
// creates an event listener for the drop down menu to select a scale
var chooseScale = document.getElementById("chooseScale");
chooseScale.addEventListener ("change", showChord, false);
// creates an event listener for the drop down menu to select a chord
var chooseChord = document.getElementById("chooseChord");
chooseChord.addEventListener ("change", showChord, false);
}
window.addEventListener("load", setUpPage, false);
HTML <script>
Last, we need to add the script element into the HTML document to tell the browser to load the demo.js file saved inside a folder names js when the page loads.
<script src="js/demo.js"></script>
removeDefaults
Oh, and I almost forgot, in order for it all to work we need the snippet of code that removes the default selection in our drop down menus. It's exactly the same as for the ice cream flavor example, but I will display it again here for clarity.
function removeSelectionDefaults() {
var noDefaults = document.getElementsByTagName("select");
for (var i = 0; i < noDefaults.length; i++) {
noDefaults[i].selectedIndex = -1;
}
}
Journey's End
We've come to the end of this tutorial! There may be bits and pieces you still don't understand, but hopefully you get the general idea of how switch statements work within a JavaScript function. Click the "next" button to see this application in action on the demo page.
To get a closer look at the full HTML, CSS and JavaScript files, here's the codepen link for this project.
Thanks for visiting!