1
00:00:00,090 --> 00:00:00,810
Welcome back.

2
00:00:00,840 --> 00:00:07,260
In the previous lesson, we set up our TML success, made our elements look nice and have them display

3
00:00:07,260 --> 00:00:07,870
on the page.

4
00:00:08,130 --> 00:00:12,210
Now we bring in JavaScript, we're going to create interaction with these elements.

5
00:00:12,360 --> 00:00:13,620
So nothing happening right now.

6
00:00:13,620 --> 00:00:14,850
I can hover over them.

7
00:00:14,850 --> 00:00:15,850
I can click on them.

8
00:00:15,990 --> 00:00:16,650
Nothing.

9
00:00:16,650 --> 00:00:17,820
Nothing is happening.

10
00:00:18,030 --> 00:00:20,190
So let's make a selection of those elements.

11
00:00:20,190 --> 00:00:21,420
We can use Clontz.

12
00:00:21,420 --> 00:00:24,380
They're going to be all the objects and using query selector all.

13
00:00:24,630 --> 00:00:26,550
So these are all the pop ups.

14
00:00:26,550 --> 00:00:28,080
We can call it pop ups if we want.

15
00:00:28,410 --> 00:00:37,110
And using our document object and query selector, all selecting all of the elements with a class of

16
00:00:37,110 --> 00:00:37,590
pop up.

17
00:00:37,590 --> 00:00:41,040
So prefix it with a dot in front of it and we can see that.

18
00:00:41,040 --> 00:00:47,730
And once we add that in now if I type pop ups, we see we've got a node list selecting all three of

19
00:00:47,730 --> 00:00:49,290
the elements that have that class.

20
00:00:49,530 --> 00:00:53,030
And that's the nice thing about Chris lecture all is because it's dynamic.

21
00:00:53,190 --> 00:00:58,770
So if I added more elements with the class A pop up, they're going to get the same properties added

22
00:00:58,770 --> 00:01:00,180
into them next.

23
00:01:00,180 --> 00:01:02,820
What we want to do is we want to add an event listener.

24
00:01:02,940 --> 00:01:07,110
So want the ability to be able to click all of the elements that have the pop up on it.

25
00:01:07,350 --> 00:01:12,480
And now that we've got it within a node list functions the same way as an array where we can loop through

26
00:01:12,480 --> 00:01:13,320
each one of those.

27
00:01:13,620 --> 00:01:15,500
And there's a number of different ways to do the loop.

28
00:01:15,720 --> 00:01:19,020
The way that I'm going to do it is I'm going to just do a basic for loop.

29
00:01:19,020 --> 00:01:21,150
So there's, again, a number of different ways to do this.

30
00:01:21,360 --> 00:01:26,850
So setting up our element and because it's a node list, we also are going to have a length to pop ups

31
00:01:27,120 --> 00:01:31,260
incrementing X by one so we can break out of our loop and looping through.

32
00:01:31,260 --> 00:01:38,520
And we can also see if we consolo pop ups having the index value of X, it's going to list out all of

33
00:01:38,520 --> 00:01:41,070
the elements with that class into the console.

34
00:01:41,070 --> 00:01:43,070
So C we've got them all represented there.

35
00:01:43,110 --> 00:01:47,210
So now that we've got them all represented, we can also add event listeners.

36
00:01:47,220 --> 00:01:49,140
So adding in those event listeners.

37
00:01:49,290 --> 00:01:55,740
So as we're iterating through pop ups and selecting the element, we can add an event listener.

38
00:01:55,740 --> 00:01:58,190
The event listener that we want to add in is a click.

39
00:01:58,200 --> 00:02:03,870
So we have an option here where we can set up a function or we could do it where there's an anonymous

40
00:02:03,870 --> 00:02:04,560
variable.

41
00:02:04,560 --> 00:02:05,610
So let's do this time.

42
00:02:05,610 --> 00:02:10,710
We're going to do it as Anonymous are going to do as we're looping through it, we're adding a function.

43
00:02:10,860 --> 00:02:14,610
And within this function, what do we want to do for that element?

44
00:02:14,850 --> 00:02:20,760
We want to get the element using this in JavaScript, adding in that last bracket.

45
00:02:20,760 --> 00:02:22,260
There it let's refresh.

46
00:02:22,260 --> 00:02:26,880
And now whenever we click these, you can see that those are showing up within the console.

47
00:02:26,880 --> 00:02:29,850
So that element information is showing up in the console.

48
00:02:30,000 --> 00:02:34,440
And what we're after is the content contained within the data message.

49
00:02:34,710 --> 00:02:39,390
So using this in JavaScript selects the active element.

50
00:02:39,870 --> 00:02:45,540
And in order to get the variable so that we can call it output text.

51
00:02:46,780 --> 00:02:48,250
And using this.

52
00:02:49,420 --> 00:02:55,300
And then get attribute, we can select any one of the attributes that are contained within this element

53
00:02:55,510 --> 00:03:00,550
so we can see we've got several different attributes to the attribute that we're after is called detA

54
00:03:00,550 --> 00:03:01,170
message.

55
00:03:01,630 --> 00:03:05,800
So we just need to specify what attribute value or after.

56
00:03:07,360 --> 00:03:11,690
And now instead of console logging, this will console log that output text.

57
00:03:12,430 --> 00:03:18,400
So now what we're doing is and what we're seeing is that we've got that output text popping up in the

58
00:03:18,400 --> 00:03:18,940
console.

59
00:03:19,180 --> 00:03:23,830
So whatever that output text that's contained within those elements, that's the one that's outputting

60
00:03:23,830 --> 00:03:24,580
to the console.

61
00:03:24,820 --> 00:03:26,530
So we're ready to move on to the next step.

62
00:03:26,830 --> 00:03:29,740
And the next step is outputting it into our message area.

63
00:03:29,750 --> 00:03:33,390
So showing the message area and outputting that output text into it.

64
00:03:33,640 --> 00:03:38,790
So go ahead and add event listeners into your project and you can be ready to move on to the next step.