1
00:00:01,110 --> 00:00:01,980
Welcome back.

2
00:00:01,980 --> 00:00:05,040
In this lesson, we are going to be adding an event handler.

3
00:00:05,370 --> 00:00:08,580
So, so far we've got all of the letters being output.

4
00:00:08,820 --> 00:00:11,940
We've got a random character string here.

5
00:00:12,150 --> 00:00:18,390
And we need to be able to guess what this word is by selecting the different letters and selecting those

6
00:00:18,390 --> 00:00:19,980
letters should be clickable.

7
00:00:20,190 --> 00:00:22,020
So that's what we want to add in in this lesson.

8
00:00:22,230 --> 00:00:26,040
And there's one thing as well that we need to consider when we click the letter.

9
00:00:26,050 --> 00:00:30,540
We don't want the player to be able to constantly click that same letter.

10
00:00:30,720 --> 00:00:33,480
So effectively we want to remove the event handler.

11
00:00:33,630 --> 00:00:39,540
So we're adding in the event handler and then we also want ability to remove it once it gets clicked.

12
00:00:39,720 --> 00:00:41,610
So this is where it gets a little bit tricky.

13
00:00:41,790 --> 00:00:48,420
And we wanted to add that event handler so we can add it as we've done before, where we do add event

14
00:00:48,420 --> 00:00:55,320
listener and then the event listener is a click and then adding in a click, we're going to launch a

15
00:00:55,320 --> 00:00:57,180
function we can call that handler.

16
00:00:57,180 --> 00:01:04,590
So setting up that function, we can also within this function, we can remove out that event.

17
00:01:04,590 --> 00:01:09,180
Listener So that's what's better to set that up as a separate function.

18
00:01:09,300 --> 00:01:12,600
And then within that function we can remove out that handler.

19
00:01:12,810 --> 00:01:21,300
And because we're still within this block of code, we can use the value of div within that handler

20
00:01:21,300 --> 00:01:22,230
event function.

21
00:01:22,440 --> 00:01:27,420
And JavaScript is going to know which value we're referring to, which element we're referring to,

22
00:01:27,630 --> 00:01:29,070
so we don't have to select it again.

23
00:01:29,430 --> 00:01:31,680
So we want to remove that listener.

24
00:01:32,040 --> 00:01:37,850
And the event listener that we want to remove out is click and with the function of handler.

25
00:01:37,860 --> 00:01:44,060
So now we should only be able to click at one time and console log out.

26
00:01:44,070 --> 00:01:48,300
And again, I can use the parent object values so I can use temp.

27
00:01:48,300 --> 00:01:53,400
And actually before we try to use it, we have to create it first.

28
00:01:53,400 --> 00:01:57,720
So we need to put the handler after we've defined the function.

29
00:01:57,740 --> 00:01:59,040
So let's try that again.

30
00:01:59,370 --> 00:02:02,940
And so now each one of these letters, you can click it.

31
00:02:03,090 --> 00:02:08,310
So I click Z and you see that I can't click it again so I can only click these letters once.

32
00:02:08,520 --> 00:02:11,940
And that's exactly what we want to happen within this function.

33
00:02:12,630 --> 00:02:17,940
So I can remove out the letter that's being clicked and we can add some additional functionality in

34
00:02:17,940 --> 00:02:18,780
here as well.

35
00:02:19,200 --> 00:02:21,480
So we can add in a class if we wanted to.

36
00:02:21,870 --> 00:02:27,210
So let's create a class and just as we've done before, we add remove classes.

37
00:02:27,210 --> 00:02:31,050
So within this class, I'm going to update the cursor.

38
00:02:31,650 --> 00:02:36,930
So it's no longer the pointer when we update it just to be default cursor.

39
00:02:37,290 --> 00:02:43,680
And I'm going to add also changing that color so it's faded out and updating the border to be white.

40
00:02:44,490 --> 00:02:46,380
So it's not going to stand out as much anymore.

41
00:02:46,410 --> 00:02:50,970
So when it gets clicked, when the element gets clicked, we want to add to that element.

42
00:02:51,270 --> 00:02:56,520
And again, we already have that element selected as the div object because this is within the parent.

43
00:02:57,360 --> 00:03:02,670
We can do a class list add and the class that we want to add is done.

44
00:03:02,910 --> 00:03:06,150
So now whenever I click the letters, they fade out a little bit.

45
00:03:06,150 --> 00:03:08,130
So go ahead and try this out for yourself.

46
00:03:08,670 --> 00:03:16,140
Create a function that you can use in order to remove out that same event handler that you added into

47
00:03:16,140 --> 00:03:17,760
that element when it gets clicked.