Welcome back.
In the previous lesson, we set up our TML success, made our elements look nice and have them display
on the page.
Now we bring in JavaScript, we're going to create interaction with these elements.
So nothing happening right now.
I can hover over them.
I can click on them.
Nothing.
Nothing is happening.
So let's make a selection of those elements.
We can use Clontz.
They're going to be all the objects and using query selector all.
So these are all the pop ups.
We can call it pop ups if we want.
And using our document object and query selector, all selecting all of the elements with a class of
pop up.
So prefix it with a dot in front of it and we can see that.
And once we add that in now if I type pop ups, we see we've got a node list selecting all three of
the elements that have that class.
And that's the nice thing about Chris lecture all is because it's dynamic.
So if I added more elements with the class A pop up, they're going to get the same properties added
into them next.
What we want to do is we want to add an event listener.
So want the ability to be able to click all of the elements that have the pop up on it.
And now that we've got it within a node list functions the same way as an array where we can loop through
each one of those.
And there's a number of different ways to do the loop.
The way that I'm going to do it is I'm going to just do a basic for loop.
So there's, again, a number of different ways to do this.
So setting up our element and because it's a node list, we also are going to have a length to pop ups
incrementing X by one so we can break out of our loop and looping through.
And we can also see if we consolo pop ups having the index value of X, it's going to list out all of
the elements with that class into the console.
So C we've got them all represented there.
So now that we've got them all represented, we can also add event listeners.
So adding in those event listeners.
So as we're iterating through pop ups and selecting the element, we can add an event listener.
The event listener that we want to add in is a click.
So we have an option here where we can set up a function or we could do it where there's an anonymous
variable.
So let's do this time.
We're going to do it as Anonymous are going to do as we're looping through it, we're adding a function.
And within this function, what do we want to do for that element?
We want to get the element using this in JavaScript, adding in that last bracket.
There it let's refresh.
And now whenever we click these, you can see that those are showing up within the console.
So that element information is showing up in the console.
And what we're after is the content contained within the data message.
So using this in JavaScript selects the active element.
And in order to get the variable so that we can call it output text.
And using this.
And then get attribute, we can select any one of the attributes that are contained within this element
so we can see we've got several different attributes to the attribute that we're after is called detA
message.
So we just need to specify what attribute value or after.
And now instead of console logging, this will console log that output text.
So now what we're doing is and what we're seeing is that we've got that output text popping up in the
console.
So whatever that output text that's contained within those elements, that's the one that's outputting
to the console.
So we're ready to move on to the next step.
And the next step is outputting it into our message area.
So showing the message area and outputting that output text into it.
So go ahead and add event listeners into your project and you can be ready to move on to the next step.