WEBVTT 0 00:00.420 --> 00:08.310 So now that we know which key was pressed and how we can get its innerHTML, how can we play a different 1 00:08.310 --> 00:10.850 sound depending on which key was pressed? 2 00:11.280 --> 00:18.300 Well you might think to the if else statements that we learned in our introduction to Javascript modules, 3 00:18.960 --> 00:22.480 but there's actually seven keys in total, 4 00:22.500 --> 00:26.380 so we would have to write quite a few if else statements. 5 00:26.460 --> 00:32.610 Now in this area it would actually be easier to write what's called a switch statement which, just like 6 00:32.640 --> 00:34.170 a railroad switch, 7 00:34.340 --> 00:39.820 it will take the code down a different track depending on the value of a variable. 8 00:39.840 --> 00:44.140 So let's delete this line of code and let's start writing our switch statements. 9 00:44.130 --> 00:50.280 Now inside Atom, as soon as you start writing the word switch, then our auto suggest will helpfully give 10 00:50.280 --> 00:53.570 you the skeleton of a Javascript switch statement. 11 00:53.760 --> 00:58.850 So if you hit enter then it'll give you the bare bones of what it should look like. 12 00:59.580 --> 01:03.760 So you can see the keyword here, instead of if, is switch. 13 01:04.050 --> 01:10.110 And then afterwards we have a set of parentheses which includes the expression or the thing that we're 14 01:10.110 --> 01:11.690 going to switch on. 15 01:11.790 --> 01:18.480 And in our case, we're going to switch on the letter that is inside the innerHTML of each of these 16 01:18.480 --> 01:19.210 buttons. 17 01:19.260 --> 01:22.190 So let's create a variable that holds that value. 18 01:22.260 --> 01:29.490 So we'll call it buttonInnerHTML, and we'll set it to equal this, 19 01:29.490 --> 01:34.420 so remember that's the button that triggered the event, .innerHTML. 20 01:34.710 --> 01:43.300 So now let's switch the button's innerHTML, and, depending on the case, we'll tell it to do something different. 21 01:43.590 --> 01:48.030 So the first case is if that was equal to w. 22 01:48.300 --> 01:54.400 So remember our first button has an innerHTML of the letter w. 23 01:54.750 --> 01:57.190 So if it was the letter w, 24 01:57.300 --> 02:01.500 then we're going to tell it to play the tom 1 drum. 25 02:01.620 --> 02:06.870 So I'm going to take that code that I commented out and then put it in here so that it will play the 26 02:06.870 --> 02:08.830 first drum. 27 02:08.910 --> 02:16.710 Now after the first case is done, then there is a break statement, which tells the code to exit the switch 28 02:16.710 --> 02:20.250 statement and continue with the rest of the code. 29 02:20.250 --> 02:25.990 Now if buttonInnerHTML didn't happen to be equal to w, then it could be equal to something else. 30 02:26.190 --> 02:33.360 So in that case we would have to specify the next likely scenario, which is what if the innerHTML was 31 02:33.510 --> 02:36.610 a, i.e. the second button got clicked. 32 02:36.780 --> 02:44.740 Well, in this case, we're going to play the next sound instead, and we're going to play the tom-2.mp3. 33 02:44.910 --> 02:48.700 And once again we have to end our case with a break. 34 02:48.720 --> 02:55.380 So the switch statement looks a little bit weird, because instead of having, say for example, an open parentheses 35 02:55.380 --> 03:04.580 here and a closing parentheses here, it actually has a colon and a break keyword instead. 36 03:04.740 --> 03:09.780 But just know that it's basically the same thing. Between the colon and the break keyword are 37 03:09.820 --> 03:16.770 all the things we want the web site to carry out if the buttonInnerHTML was equal to this particular 38 03:16.770 --> 03:17.540 case. 39 03:17.610 --> 03:19.560 Now in this case, 40 03:19.560 --> 03:21.710 instead of calling both of our sounds 41 03:21.840 --> 03:27.770 audio, we should really give it a different name. 42 03:27.870 --> 03:31.520 So why don't we call our first one the sound that it's going to make, 43 03:31.590 --> 03:38.870 so tom1, and our second one tom2, after the sound file that's going to be played? 44 03:38.940 --> 03:44.070 And remember if you're going to change it here then you have to change it here as well so that you know 45 03:44.100 --> 03:47.230 that you're playing tom1 and you're playing tom2. 46 03:47.250 --> 03:54.600 Now I've just gone in and added all of the remaining cases for the key s, d, j, k and l. 47 03:54.620 --> 04:00.660 So now I've gone in and I've added all of the other remaining cases so that our web site knows what 48 04:00.660 --> 04:05.460 to do if the s key was pressed or the d or the j, k, l. 49 04:05.540 --> 04:09.890 Now the final case that we've got is actually the default case. 50 04:10.230 --> 04:16.980 Now the default is kind of like the else statement at the end of an if. It covers all of the other scenarios 51 04:16.980 --> 04:18.730 that we haven't specified. 52 04:18.960 --> 04:27.590 What if the buttonInnerHTML wasn't w, a, s, d, and instead it was something like 1 or comma? 53 04:28.020 --> 04:30.600 Well that's when the default will trigger. 54 04:30.630 --> 04:35.730 Now even though in most cases the default will likely never be triggered, 55 04:35.850 --> 04:41.400 it's still good practice to include it, as you can't always predict ahead of time what might go wrong 56 04:41.400 --> 04:42.030 in the future, 57 04:42.030 --> 04:42.580 right? 58 04:42.840 --> 04:45.890 And the value could always be something that you didn't expect. 59 04:46.080 --> 04:51.540 So let's just go ahead and add a console.log that logs the buttonInnerHTML 60 04:51.570 --> 04:53.580 that triggered the default case. 61 04:53.790 --> 05:00.510 So let's save, refresh our web site, and you can see now if I click on any of these buttons 62 05:03.700 --> 05:07.450 you can see that we get a different sound for each button click. 63 05:07.570 --> 05:08.990 That's pretty cool, right? Now 64 05:09.000 --> 05:15.820 in the next lesson we're going to dig into keyboard events and see how we can use the keyboard to trigger 65 05:15.820 --> 05:19.280 these sounds instead of having to press on the buttons. 66 05:19.380 --> 05:22.020 So for all of that and more, I'll see you on the next lesson.