1
00:00:01,230 --> 00:00:07,050
In the previous lesson, we generated a list from all of the button elements that we had on our page.

2
00:00:07,350 --> 00:00:09,100
Now it's time to make them interactive.

3
00:00:09,210 --> 00:00:14,580
And this is usually the fun part of making JavaScript, where you can make interactions between what

4
00:00:14,580 --> 00:00:18,910
you see within your browser as well as within the JavaScript code.

5
00:00:19,170 --> 00:00:25,020
So we've already selected the buttons, placed them in an object called buttons, and this is a node

6
00:00:25,020 --> 00:00:25,500
list.

7
00:00:25,680 --> 00:00:29,700
So node list will have a length similar to an array they all have.

8
00:00:29,730 --> 00:00:36,300
The number of items that are available within that list is indicated under the length and we can use

9
00:00:36,300 --> 00:00:37,650
that when we're creating a loop.

10
00:00:37,980 --> 00:00:40,410
There's a number of ways to create loops.

11
00:00:40,680 --> 00:00:46,110
I'm going to use a simple for loop, so starting out at AY equals zero.

12
00:00:46,500 --> 00:00:53,790
We're going to check to see Walli is less than the length of buttons and as we saw, Buttons has a length

13
00:00:53,790 --> 00:00:59,970
of three because there are three buttons there on the page and we need to increment I so that we have

14
00:00:59,970 --> 00:01:01,680
a way out of our loop.

15
00:01:02,490 --> 00:01:06,140
And then this is the block of code that's going to get run within that for loop.

16
00:01:06,180 --> 00:01:08,070
We want to add in event listeners.

17
00:01:08,460 --> 00:01:14,190
So we've got our buttons list selecting out the eye, which is the index.

18
00:01:14,370 --> 00:01:20,430
So it will start at zero, then it'll go to one and then L2 and then this will no longer be true and

19
00:01:20,430 --> 00:01:21,840
it's going to break out of this list.

20
00:01:22,080 --> 00:01:28,320
So this is a great way to add event listeners to those elements using add event listener.

21
00:01:28,620 --> 00:01:35,250
So just as we would with a single element, we're adding it in as we're looping through all of the different

22
00:01:35,250 --> 00:01:37,190
buttons that are available on our page.

23
00:01:37,860 --> 00:01:43,920
We're going to listen for a click and we're sending it all over to the same function called gameplay.

24
00:01:44,900 --> 00:01:49,370
So we're going to keep things really simple and then within gameplay, this is where we're actually

25
00:01:49,370 --> 00:01:57,170
going to determine what got actually clicked and what the value of the element was that got click.

26
00:01:57,530 --> 00:02:02,990
And for now, we can output that value within the console using console log.

27
00:02:03,750 --> 00:02:12,440
We can use E target, which will get returned back the element that triggered the event.

28
00:02:13,550 --> 00:02:16,420
And then we can look at the entire text of that element.

29
00:02:17,270 --> 00:02:18,200
So let's try that out.

30
00:02:18,590 --> 00:02:23,750
And within the console, when we click any one of these buttons, we've attached event listeners to

31
00:02:23,750 --> 00:02:24,770
each and every one of them.

32
00:02:25,040 --> 00:02:31,430
And you can see that whatever is contained within that inner text here is what's being output here within

33
00:02:31,430 --> 00:02:32,060
the console.

34
00:02:32,720 --> 00:02:39,350
And we're ready to move on to the next step because we're able to trigger off the gameplay by the player

35
00:02:39,350 --> 00:02:40,190
clicking a button.

36
00:02:40,670 --> 00:02:46,220
And this is going to trigger off the additional gameplay where we're going to have the computer as well,

37
00:02:46,310 --> 00:02:48,440
selecting the rock, paper, scissors.

38
00:02:48,650 --> 00:02:52,550
And then we do a comparison to see which one wins.

39
00:02:52,850 --> 00:02:56,260
And then we're going to update the score and those score values.

40
00:02:56,480 --> 00:02:58,370
So all of that is still yet to come.

41
00:02:58,610 --> 00:03:05,660
Go ahead and add in the selection and adding of event listeners to your button elements into your own

42
00:03:05,660 --> 00:03:09,350
project, and you're going to be ready to move on to the next step.