All language subtitles for 008 How to Use Switch Statements in Javascript.en

So now that we know which key was pressed and how we can get its innerHTML, how can we play a different

sound depending on which key was pressed?

Well you might think to the if else statements that we learned in our introduction to Javascript modules,

but there's actually seven keys in total,

so we would have to write quite a few if else statements.

Now in this area it would actually be easier to write what's called a switch statement which, just like

a railroad switch,

it will take the code down a different track depending on the value of a variable.

So let's delete this line of code and let's start writing our switch statements.

Now inside Atom, as soon as you start writing the word switch, then our auto suggest will helpfully give

you the skeleton of a Javascript switch statement.

So if you hit enter then it'll give you the bare bones of what it should look like.

So you can see the keyword here, instead of if, is switch.

And then afterwards we have a set of parentheses which includes the expression or the thing that we're

going to switch on.

And in our case, we're going to switch on the letter that is inside the innerHTML of each of these

buttons.

So let's create a variable that holds that value.

So we'll call it buttonInnerHTML, and we'll set it to equal this,

so remember that's the button that triggered the event, .innerHTML.

So now let's switch the button's innerHTML, and, depending on the case, we'll tell it to do something different.

So the first case is if that was equal to w.

So remember our first button has an innerHTML of the letter w.

So if it was the letter w,

then we're going to tell it to play the tom 1 drum.

So I'm going to take that code that I commented out and then put it in here so that it will play the

first drum.

Now after the first case is done, then there is a break statement, which tells the code to exit the switch

statement and continue with the rest of the code.

Now if buttonInnerHTML didn't happen to be equal to w, then it could be equal to something else.

So in that case we would have to specify the next likely scenario, which is what if the innerHTML was

a, i.e. the second button got clicked.

Well, in this case, we're going to play the next sound instead, and we're going to play the tom-2.mp3.

And once again we have to end our case with a break.

So the switch statement looks a little bit weird, because instead of having, say for example, an open parentheses

here and a closing parentheses here, it actually has a colon and a break keyword instead.

But just know that it's basically the same thing. Between the colon and the break keyword are

all the things we want the web site to carry out if the buttonInnerHTML was equal to this particular

case.

Now in this case,

instead of calling both of our sounds

audio, we should really give it a different name.

So why don't we call our first one the sound that it's going to make,

so tom1, and our second one tom2, after the sound file that's going to be played?

And remember if you're going to change it here then you have to change it here as well so that you know

that you're playing tom1 and you're playing tom2.

Now I've just gone in and added all of the remaining cases for the key s, d, j, k and l.

So now I've gone in and I've added all of the other remaining cases so that our web site knows what

to do if the s key was pressed or the d or the j, k, l.

Now the final case that we've got is actually the default case.

Now the default is kind of like the else statement at the end of an if. It covers all of the other scenarios

that we haven't specified.

What if the buttonInnerHTML wasn't w, a, s, d, and instead it was something like 1 or comma?

Well that's when the default will trigger.

Now even though in most cases the default will likely never be triggered,

it's still good practice to include it, as you can't always predict ahead of time what might go wrong

in the future,

right?

And the value could always be something that you didn't expect.

So let's just go ahead and add a console.log that logs the buttonInnerHTML

that triggered the default case.

So let's save, refresh our web site, and you can see now if I click on any of these buttons

you can see that we get a different sound for each button click.

That's pretty cool, right? Now

in the next lesson we're going to dig into keyboard events and see how we can use the keyboard to trigger

these sounds instead of having to press on the buttons.

So for all of that and more, I'll see you on the next lesson.