Welcome back in this lesson, we're going to be listening for an event on an element, so creating another
asset within our.
We're going to create a button element and we can just call this summit.
And then when we refresh it, we see we've got added in a submit button.
So the same way that we did last time where we created variables in order to connect to our elements,
we're going to do the same thing using query selector and selecting that button element.
And if you do have more than one with the button tag, they can be more specific.
You can add in a class or you can add in an idea.
And there's a number of different ways that you can make these selections.
So if you are selecting by a class and we'll give this class A button, a B10 class, I can also select
via the B10 class.
So it actually doesn't matter.
I'm able to make the selection and if we have more one more than one element that meets the criteria,
if we have more than one button, it's going to simply select the first one.
So even if we have more than one, you're going to see what happens here.
When I type in BTE and we're always going to be related to the first one.
And that's the one that's getting highlighted right now within Chrome.
So see, and if we do want to make a selection on a button and if it's not the first one, then again,
we do need to be more specific and we need to have a way to differentiate the content within the buttons.
So now that we've connected the button, let's add an event listener to that button.
So selecting the button object, add event, listener and event that we're going to listen for is a
click.
So we need to specify the event and then also we add in a function that's going to handle that event.
So right now, within the function, we can simply console log out and we can type in click.
So now when we go and we refresh the page and we hit submit, you can see that our output in the console
is click.
So if we can take this one step further as well and we can output this and what this will be, this
will represent the element that made the event fire off, so activated the event on this particular
element.
So it's representing the current button that made the click so we can check to see some of the button
contents.
We can get class and we can get this this object information this way.
And as well, this is going to be the same thing as BTE, an object.
It's going to represent the same item within the dorm.
So if I refresh and if I do this, you're going to see that both of them are the same.
They're representing the same object within the dorm.
We also have an event option that we can track within the event listeners as well.
So if we output this and we output event, this is also going to represent the element that triggered
the event.
But it's going to also have some additional information so we can see the element that provided the
source the target, which was the button.
So if we did event target, that's going to actually represent that same element that initiated the
event to fire off.
So there's multiple ways in order to get the information and using the event object, this gives us
some additional information on the event itself as well as we can navigate to the target.
We can use this to simply get the target of whichever element triggered the event, or we can use our
B10, which was the way that we made the selection of the object.
So now that we've got an event listener, we want to make something happen and that's coming up in the
next lesson.
So go ahead and add in your event listener.
And coming up, we're going to select the the input and output, the value of the input into the select
element.
So what's going to happen is when I hit submit, the div content will update to Lowrance and I'll show
you how to do that in the upcoming lesson.