1
00:00:00,240 --> 00:00:05,160
This lesson we're going to be adding in how we're handling the button click right now when we click

2
00:00:05,160 --> 00:00:06,540
the button, it says hello.

3
00:00:06,630 --> 00:00:08,790
So that's not really doing a whole lot.

4
00:00:09,060 --> 00:00:11,400
So we need to update this function.

5
00:00:11,800 --> 00:00:16,230
So first of all, let's grab the event that triggered off.

6
00:00:17,600 --> 00:00:26,660
This function and we can use the E target in order to get that element information, so when we click

7
00:00:26,660 --> 00:00:30,620
it, you see that this is the element that made that trigger.

8
00:00:30,980 --> 00:00:34,220
And we can also add in another button just for the fun of it.

9
00:00:34,550 --> 00:00:36,980
And we can call this game, too.

10
00:00:38,240 --> 00:00:40,870
And we'll call it new game, too, as well.

11
00:00:40,880 --> 00:00:42,080
So we'll have two buttons there.

12
00:00:42,350 --> 00:00:46,730
So this button shows up here, this button shows up here.

13
00:00:47,120 --> 00:00:53,450
And in case we have more than one button, we need a way to distinguish which button it is and what

14
00:00:53,450 --> 00:00:55,730
action we want to take on that button.

15
00:00:56,000 --> 00:01:01,760
So if we want to distinguish the button, the big difference between the two buttons is the TEMEL or

16
00:01:01,760 --> 00:01:06,910
the inner text, as well as they both have different classes associated with it.

17
00:01:07,310 --> 00:01:15,440
So let's make use of that and we'll use a conditional statement to check to see if e target class list.

18
00:01:16,040 --> 00:01:22,130
So this is looking through all of the classes of the elements that's going to see button our BTM advocacy,

19
00:01:22,130 --> 00:01:25,760
the new game two or the new game, whichever one that we've clicked.

20
00:01:26,060 --> 00:01:31,920
And we're going to check to see if it contains and this is the class that we're looking for.

21
00:01:31,970 --> 00:01:33,730
So we're looking for new game.

22
00:01:34,790 --> 00:01:42,710
So if it does, then we are going to do something in here with the code and we'll say console log.

23
00:01:42,740 --> 00:01:46,250
So that has that will check to see if it contains new game.

24
00:01:46,520 --> 00:01:51,380
And if you want to see what the output of that is, you can update it within the console as well.

25
00:01:51,380 --> 00:01:52,040
So you can see.

26
00:01:52,400 --> 00:01:55,670
So I just need to add in one more bracket there around a bracket.

27
00:01:55,670 --> 00:01:56,750
So let's refresh.

28
00:01:57,080 --> 00:01:59,650
So when we click this one, we get true.

29
00:01:59,660 --> 00:02:02,930
And yes, when we click this one, we just get false.

30
00:02:03,260 --> 00:02:10,070
So what this is doing is this is returning a boolean value and checking to see if that particular element

31
00:02:10,250 --> 00:02:12,200
contains the class new game.

32
00:02:12,380 --> 00:02:14,600
And if it does, then it comes back.

33
00:02:14,600 --> 00:02:15,050
True.

34
00:02:15,260 --> 00:02:22,610
And our conditional statement that if it is true, then we execute the code within the block and else

35
00:02:22,610 --> 00:02:25,120
we could do an L statement if we wanted to as well.

36
00:02:25,400 --> 00:02:28,340
So we check to see if it's got new game and it comes back.

37
00:02:28,340 --> 00:02:28,760
True.

38
00:02:28,850 --> 00:02:31,600
And that's why this code is being run.

39
00:02:31,940 --> 00:02:39,760
So once we know that this is the right button to start the game, we can initiate the start game function.

40
00:02:40,310 --> 00:02:46,580
So let's set up a function for that and start the game so we know that we're ready to start the gameplay

41
00:02:46,760 --> 00:02:53,810
and will console log outs and I'll put start in so we should test that out and then I'll remove the

42
00:02:53,810 --> 00:02:55,130
second button as well.

43
00:02:55,400 --> 00:02:56,960
So we click the second button.

44
00:02:57,170 --> 00:02:59,210
Nothing happens, the game doesn't start.

45
00:02:59,390 --> 00:03:01,730
We click the first button, we get true.

46
00:03:01,970 --> 00:03:02,540
Yes.

47
00:03:02,540 --> 00:03:04,400
And the game is ready to start.

48
00:03:04,670 --> 00:03:06,800
So go ahead and add this into your project.

49
00:03:06,980 --> 00:03:16,070
Handle the buttons, check to use class list contains in order to check to see if your element has a

50
00:03:16,070 --> 00:03:18,200
class of new game.

51
00:03:18,470 --> 00:03:21,170
And if it does, then that should be the right button.

52
00:03:21,380 --> 00:03:23,390
That's going to trigger off the start of the game.

53
00:03:23,570 --> 00:03:26,690
And you can go ahead and you can get rid of the second button if you want as well.

54
00:03:26,690 --> 00:03:28,070
We're not going to be making use of that.

55
00:03:28,610 --> 00:03:30,320
So set that up, try it out.

56
00:03:30,590 --> 00:03:36,410
And next lesson, we are going to continue to build this out and check to make sure that the content

57
00:03:36,410 --> 00:03:40,910
is loaded, as well as bring in our data that we're going to make use of within the game.

58
00:03:40,910 --> 00:03:42,620
So all of that is still yet to come.