0
1
00:00:00,420 --> 00: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

2
00:00:08,310 --> 00:00:10,850
sound depending on which key was pressed?
2

3
00:00:11,280 --> 00:00:18,300
Well you might think to the if else statements that we learned in our introduction to Javascript modules,
3

4
00:00:18,960 --> 00:00:22,480
but there's actually seven keys in total,
4

5
00:00:22,500 --> 00:00:26,380
so we would have to write quite a few if else statements.
5

6
00:00:26,460 --> 00:00:32,610
Now in this area it would actually be easier to write what's called a switch statement which, just like
6

7
00:00:32,640 --> 00:00:34,170
a railroad switch,
7

8
00:00:34,340 --> 00:00:39,820
it will take the code down a different track depending on the value of a variable.
8

9
00:00:39,840 --> 00:00:44,140
So let's delete this line of code and let's start writing our switch statements.
9

10
00:00:44,130 --> 00:00:50,280
Now inside Atom, as soon as you start writing the word switch, then our auto suggest will helpfully give
10

11
00:00:50,280 --> 00:00:53,570
you the skeleton of a Javascript switch statement.
11

12
00:00:53,760 --> 00:00:58,850
So if you hit enter then it'll give you the bare bones of what it should look like.
12

13
00:00:59,580 --> 00:01:03,760
So you can see the keyword here, instead of if, is switch.
13

14
00:01:04,050 --> 00:01:10,110
And then afterwards we have a set of parentheses which includes the expression or the thing that we're
14

15
00:01:10,110 --> 00:01:11,690
going to switch on.
15

16
00:01:11,790 --> 00: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

17
00:01:18,480 --> 00:01:19,210
buttons.
17

18
00:01:19,260 --> 00:01:22,190
So let's create a variable that holds that value.
18

19
00:01:22,260 --> 00:01:29,490
So we'll call it buttonInnerHTML, and we'll set it to equal this,
19

20
00:01:29,490 --> 00:01:34,420
so remember that's the button that triggered the event, .innerHTML.
20

21
00:01:34,710 --> 00: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

22
00:01:43,590 --> 00:01:48,030
So the first case is if that was equal to w.
22

23
00:01:48,300 --> 00:01:54,400
So remember our first button has an innerHTML of the letter w.
23

24
00:01:54,750 --> 00:01:57,190
So if it was the letter w,
24

25
00:01:57,300 --> 00:02:01,500
then we're going to tell it to play the tom 1 drum.
25

26
00:02:01,620 --> 00: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

27
00:02:06,870 --> 00:02:08,830
first drum.
27

28
00:02:08,910 --> 00: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

29
00:02:16,710 --> 00:02:20,250
statement and continue with the rest of the code.
29

30
00:02:20,250 --> 00:02:25,990
Now if buttonInnerHTML didn't happen to be equal to w, then it could be equal to something else.
30

31
00:02:26,190 --> 00:02:33,360
So in that case we would have to specify the next likely scenario, which is what if the innerHTML was
31

32
00:02:33,510 --> 00:02:36,610
a, i.e. the second button got clicked.
32

33
00:02:36,780 --> 00: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

34
00:02:44,910 --> 00:02:48,700
And once again we have to end our case with a break.
34

35
00:02:48,720 --> 00:02:55,380
So the switch statement looks a little bit weird, because instead of having, say for example, an open parentheses
35

36
00:02:55,380 --> 00:03:04,580
here and a closing parentheses here, it actually has a colon and a break keyword instead.
36

37
00:03:04,740 --> 00:03:09,780
But just know that it's basically the same thing. Between the colon and the break keyword are
37

38
00:03:09,820 --> 00:03:16,770
all the things we want the web site to carry out if the buttonInnerHTML was equal to this particular
38

39
00:03:16,770 --> 00:03:17,540
case.
39

40
00:03:17,610 --> 00:03:19,560
Now in this case,
40

41
00:03:19,560 --> 00:03:21,710
instead of calling both of our sounds
41

42
00:03:21,840 --> 00:03:27,770
audio, we should really give it a different name.
42

43
00:03:27,870 --> 00:03:31,520
So why don't we call our first one the sound that it's going to make,
43

44
00:03:31,590 --> 00:03:38,870
so tom1, and our second one tom2, after the sound file that's going to be played?
44

45
00:03:38,940 --> 00: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

46
00:03:44,100 --> 00:03:47,230
that you're playing tom1 and you're playing tom2.
46

47
00:03:47,250 --> 00: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

48
00:03:54,620 --> 00: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

49
00:04:00,660 --> 00:04:05,460
to do if the s key was pressed or the d or the j, k, l.
49

50
00:04:05,540 --> 00:04:09,890
Now the final case that we've got is actually the default case.
50

51
00:04:10,230 --> 00: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

52
00:04:16,980 --> 00:04:18,730
that we haven't specified.
52

53
00:04:18,960 --> 00:04:27,590
What if the buttonInnerHTML wasn't w, a, s, d, and instead it was something like 1 or comma?
53

54
00:04:28,020 --> 00:04:30,600
Well that's when the default will trigger.
54

55
00:04:30,630 --> 00:04:35,730
Now even though in most cases the default will likely never be triggered,
55

56
00:04:35,850 --> 00: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

57
00:04:41,400 --> 00:04:42,030
in the future,
57

58
00:04:42,030 --> 00:04:42,580
right?
58

59
00:04:42,840 --> 00:04:45,890
And the value could always be something that you didn't expect.
59

60
00:04:46,080 --> 00:04:51,540
So let's just go ahead and add a console.log that logs the buttonInnerHTML
60

61
00:04:51,570 --> 00:04:53,580
that triggered the default case.
61

62
00:04:53,790 --> 00: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

63
00:05:03,700 --> 00:05:07,450
you can see that we get a different sound for each button click.
63

64
00:05:07,570 --> 00:05:08,990
That's pretty cool, right? Now
64

65
00:05:09,000 --> 00: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

66
00:05:15,820 --> 00:05:19,280
these sounds instead of having to press on the buttons.
66

67
00:05:19,380 --> 00:05:22,020
So for all of that and more, I'll see you on the next lesson.