Welcome back.
This is going to be a quick lesson to modernize what we did in the previous lesson where we've got our
HTML elements and we're have the unclick attributes.
So we're going to get rid of all of these and do this with JavaScript.
So we're going to have only HTML within the index HTML, but we're going to keep the three button elements
and I'll show you how you can select these.
And there's going to be more on this coming up.
And this is all to do with the DOM.
So the DOM gives us an option to interact with the elements on the page.
And we saw that earlier.
When we console or console directory the document object, we see we've got all of the stuff that's
contained within the document object.
We've got all of the HTML information.
If we go into the children, you can see within the HTML tags, we've got more children, we've got
the head, we've got the body.
And then within the body we've got even more children and we've got all of our buttons available in
the in the body.
And we can access these using JavaScript.
So let me give you a quick sneak peek.
And this is JavaScript object that's actually a giant JavaScript object.
And we are going to be covering objects in more detail.
So this was just for those of you that do want to have a more modern way of selecting elements, then
this is the lesson for you.
So we want to select all of the buttons on the page so all the elements with the button tag.
So we're using the document object.
So this is the same one that we've printed out here.
And because we're able to access the document, this gives us the ability to select the elements on
the page, all using JavaScript.
So we use a built in method within the document called Query Selector All, and then we need to specify
what we want to select.
We're selecting all the elements with the button tag.
And now if I do console log buttons, you're going to see that we've got all of them within this list
format.
So we've got all three different buttons.
So that means that we can access the buttons one by one and because we can access the buttons, we can
also have an event listener for those buttons.
So see how to add those in as well.
So we've got various buttons built into JavaScript as well.
So there's these click events that we can set up.
So we've got an on click and then we just need to select the function and it is expecting a function
on the other side of the equals sign.
So that's why we don't have the invoking of the function.
We don't have the rounded brackets.
We don't have to include those.
So do the same thing for the second button, going to the second message and then the third button and
the third message.
And this will make a lot more sense when we look at arrays, because this is within an array format.
It's called a node list, but it's similar to arrays.
So now whenever we click the buttons, you're going to see that we're able to invoke the functions and
we've got the exact same functionality, but we have stripped it out of the HTML and brought it all
into JavaScript.
So this is a more modern way of doing the Arncliffe.
Now you can use whichever one you prefer while you're learning JavaScript you can use.
And there's also another way to do this as well, when we look at the DOM in more detail.
So you can try this out as well and add this into your project.