1
00:00:00,180 --> 00:00:05,940
In the previous lesson, we built out our HTML, hooked up our JavaScript objects to connect to that

2
00:00:05,940 --> 00:00:08,710
HTML, and now we need to create some interaction.

3
00:00:09,000 --> 00:00:10,930
We've got buttons, we click them.

4
00:00:10,950 --> 00:00:12,930
Nothing happens in this lesson.

5
00:00:12,930 --> 00:00:15,750
We're going to be taking care of that and making things happen.

6
00:00:15,840 --> 00:00:21,540
So creating that interaction within JavaScript and the elements on the page interacting with the domain,

7
00:00:21,840 --> 00:00:30,000
we noticed that when we select the to the button tag from the HTML, we get two items being returned

8
00:00:30,000 --> 00:00:33,450
back and we get what's created is a node list.

9
00:00:33,630 --> 00:00:36,810
So this is similar to an array and we've got a length value.

10
00:00:36,990 --> 00:00:42,450
So depending on how many items are available within this list, we can list out and we always get a

11
00:00:42,450 --> 00:00:45,870
length value being returned back and we know what the length value.

12
00:00:45,870 --> 00:00:47,460
We can use this within a loop.

13
00:00:47,730 --> 00:00:53,460
So let's set up a simple loop starting out at zero because the node list, just like arrays, starts

14
00:00:53,460 --> 00:01:00,750
out at zero and we're going to loop through while AI is less than buttons and using the length value

15
00:01:00,780 --> 00:01:02,330
that we have within that object.

16
00:01:02,340 --> 00:01:05,400
And we need to increment AI so that we have a way out of our loop.

17
00:01:05,610 --> 00:01:09,450
And as we loop through, we can select each one of the buttons.

18
00:01:09,870 --> 00:01:16,620
And I'll show you that within the console log that if we take the buttons and we provide an index value,

19
00:01:16,950 --> 00:01:20,070
we're going to see that both of those elements get listed out.

20
00:01:20,310 --> 00:01:25,110
And as I hover over them within the Chrome console, you can see they light up as well.

21
00:01:25,230 --> 00:01:31,500
So we're able to select each one of those buttons and that means that we can utilize them and attach

22
00:01:31,650 --> 00:01:32,680
that listeners to them.

23
00:01:33,000 --> 00:01:33,850
So let's do that.

24
00:01:33,870 --> 00:01:35,540
We're adding an event listener.

25
00:01:35,850 --> 00:01:38,700
We need to specify what type of event we're listening for.

26
00:01:38,850 --> 00:01:42,720
And in this case, we're going to be listening for a click because their buttons, of course, and it

27
00:01:42,720 --> 00:01:43,560
just makes sense.

28
00:01:43,890 --> 00:01:48,030
And once it gets clicked, then we will toss a coin.

29
00:01:48,030 --> 00:01:50,430
And that's going to be the function that we're going to render out.

30
00:01:50,460 --> 00:01:51,840
We also have an option here.

31
00:01:51,840 --> 00:01:57,090
If we wanted to, we could do an anonymous function, something like this, and then have our block

32
00:01:57,090 --> 00:01:58,740
of code run in here.

33
00:01:58,920 --> 00:02:04,290
But because usually the way that I like to do it, especially depending on the size of the function,

34
00:02:04,470 --> 00:02:09,360
I like to keep that separate in case I want to call it somewhere else within the script as well.

35
00:02:09,720 --> 00:02:15,540
So now let's set up our toss coin function and this is what's going to get invoked every time one of

36
00:02:15,570 --> 00:02:16,890
the buttons gets clicked.

37
00:02:17,190 --> 00:02:20,580
And we also need to know what the contents of the button is.

38
00:02:20,730 --> 00:02:25,460
So we're passing in an event object and see what that looks like within the console.

39
00:02:26,040 --> 00:02:32,330
So that event object is the one that triggers the content from whatever the button gets clicked.

40
00:02:32,340 --> 00:02:38,520
So if I click heads, I get this as the object and I get this as the event object.

41
00:02:38,700 --> 00:02:42,840
So you see they're slightly different and we can also get the target information.

42
00:02:42,840 --> 00:02:47,970
So the event target information is what actually initiated the clicking of the button.

43
00:02:48,120 --> 00:02:49,930
What element actually initiated that?

44
00:02:50,130 --> 00:02:56,610
So if I hit heads, you can see that I've got that same element information and also coincides with

45
00:02:56,610 --> 00:02:58,770
that button's value that we've got over there.

46
00:02:58,890 --> 00:03:02,850
If I had tails, I get the tails button being initiated.

47
00:03:03,240 --> 00:03:09,620
And that also means that we've got that within a usable object format where we can go in one level deeper

48
00:03:09,750 --> 00:03:12,130
and we can check whatever that inner text is.

49
00:03:12,540 --> 00:03:16,770
So now when I click, I'm going to clear this one out and I get heads.

50
00:03:16,920 --> 00:03:21,420
I see I've got heads in the console, tails, I've got tails in the console.

51
00:03:21,630 --> 00:03:27,660
And this is our way that we can distinguish between which button got clicked because we are sending

52
00:03:27,660 --> 00:03:32,440
it over to the same function using that toss coin function and all.

53
00:03:32,610 --> 00:03:37,050
The only thing that's different is whatever element actually triggered that event.

54
00:03:37,200 --> 00:03:41,520
And we're actually selecting that inner text of that element that triggered the event.

55
00:03:41,580 --> 00:03:46,980
And we can distinguish between the two buttons now and we can use this in the upcoming lesson in order

56
00:03:47,190 --> 00:03:53,130
to determine whether the player pressed heads or tails, because, of course, we can see the text that's

57
00:03:53,130 --> 00:03:53,880
contained within it.

58
00:03:53,910 --> 00:04:01,080
So go ahead and add in that interaction to your elements, making sure that your buttons are clickable

59
00:04:01,260 --> 00:04:07,260
and that they're invoking a function you can call the function toss coin and then within that toss coin

60
00:04:07,260 --> 00:04:14,340
function, just to be double sure that you are outputting that content and it is getting invoked once

61
00:04:14,340 --> 00:04:22,140
those buttons get clicked, output the target dot inner text into the console to make sure that everything

62
00:04:22,140 --> 00:04:23,250
is working properly.

63
00:04:23,370 --> 00:04:25,230
And you could be ready to move on to the next step.