In the previous lesson, we generated a list from all of the button elements that we had on our page.
Now it's time to make them interactive.
And this is usually the fun part of making JavaScript, where you can make interactions between what
you see within your browser as well as within the JavaScript code.
So we've already selected the buttons, placed them in an object called buttons, and this is a node
list.
So node list will have a length similar to an array they all have.
The number of items that are available within that list is indicated under the length and we can use
that when we're creating a loop.
There's a number of ways to create loops.
I'm going to use a simple for loop, so starting out at AY equals zero.
We're going to check to see Walli is less than the length of buttons and as we saw, Buttons has a length
of three because there are three buttons there on the page and we need to increment I so that we have
a way out of our loop.
And then this is the block of code that's going to get run within that for loop.
We want to add in event listeners.
So we've got our buttons list selecting out the eye, which is the index.
So it will start at zero, then it'll go to one and then L2 and then this will no longer be true and
it's going to break out of this list.
So this is a great way to add event listeners to those elements using add event listener.
So just as we would with a single element, we're adding it in as we're looping through all of the different
buttons that are available on our page.
We're going to listen for a click and we're sending it all over to the same function called gameplay.
So we're going to keep things really simple and then within gameplay, this is where we're actually
going to determine what got actually clicked and what the value of the element was that got click.
And for now, we can output that value within the console using console log.
We can use E target, which will get returned back the element that triggered the event.
And then we can look at the entire text of that element.
So let's try that out.
And within the console, when we click any one of these buttons, we've attached event listeners to
each and every one of them.
And you can see that whatever is contained within that inner text here is what's being output here within
the console.
And we're ready to move on to the next step because we're able to trigger off the gameplay by the player
clicking a button.
And this is going to trigger off the additional gameplay where we're going to have the computer as well,
selecting the rock, paper, scissors.
And then we do a comparison to see which one wins.
And then we're going to update the score and those score values.
So all of that is still yet to come.
Go ahead and add in the selection and adding of event listeners to your button elements into your own
project, and you're going to be ready to move on to the next step.