In the previous lesson, we built out our HTML, hooked up our JavaScript objects to connect to that
HTML, and now we need to create some interaction.
We've got buttons, we click them.
Nothing happens in this lesson.
We're going to be taking care of that and making things happen.
So creating that interaction within JavaScript and the elements on the page interacting with the domain,
we noticed that when we select the to the button tag from the HTML, we get two items being returned
back and we get what's created is a node list.
So this is similar to an array and we've got a length value.
So depending on how many items are available within this list, we can list out and we always get a
length value being returned back and we know what the length value.
We can use this within a loop.
So let's set up a simple loop starting out at zero because the node list, just like arrays, starts
out at zero and we're going to loop through while AI is less than buttons and using the length value
that we have within that object.
And we need to increment AI so that we have a way out of our loop.
And as we loop through, we can select each one of the buttons.
And I'll show you that within the console log that if we take the buttons and we provide an index value,
we're going to see that both of those elements get listed out.
And as I hover over them within the Chrome console, you can see they light up as well.
So we're able to select each one of those buttons and that means that we can utilize them and attach
that listeners to them.
So let's do that.
We're adding an event listener.
We need to specify what type of event we're listening for.
And in this case, we're going to be listening for a click because their buttons, of course, and it
just makes sense.
And once it gets clicked, then we will toss a coin.
And that's going to be the function that we're going to render out.
We also have an option here.
If we wanted to, we could do an anonymous function, something like this, and then have our block
of code run in here.
But because usually the way that I like to do it, especially depending on the size of the function,
I like to keep that separate in case I want to call it somewhere else within the script as well.
So now let's set up our toss coin function and this is what's going to get invoked every time one of
the buttons gets clicked.
And we also need to know what the contents of the button is.
So we're passing in an event object and see what that looks like within the console.
So that event object is the one that triggers the content from whatever the button gets clicked.
So if I click heads, I get this as the object and I get this as the event object.
So you see they're slightly different and we can also get the target information.
So the event target information is what actually initiated the clicking of the button.
What element actually initiated that?
So if I hit heads, you can see that I've got that same element information and also coincides with
that button's value that we've got over there.
If I had tails, I get the tails button being initiated.
And that also means that we've got that within a usable object format where we can go in one level deeper
and we can check whatever that inner text is.
So now when I click, I'm going to clear this one out and I get heads.
I see I've got heads in the console, tails, I've got tails in the console.
And this is our way that we can distinguish between which button got clicked because we are sending
it over to the same function using that toss coin function and all.
The only thing that's different is whatever element actually triggered that event.
And we're actually selecting that inner text of that element that triggered the event.
And we can distinguish between the two buttons now and we can use this in the upcoming lesson in order
to determine whether the player pressed heads or tails, because, of course, we can see the text that's
contained within it.
So go ahead and add in that interaction to your elements, making sure that your buttons are clickable
and that they're invoking a function you can call the function toss coin and then within that toss coin
function, just to be double sure that you are outputting that content and it is getting invoked once
those buttons get clicked, output the target dot inner text into the console to make sure that everything
is working properly.
And you could be ready to move on to the next step.