In the previous lesson, we set up our success as well as our TML and we've got nice output of five
stars and a message area, but it doesn't do anything.
So this is where JavaScript comes in and it's going to make all of that content interactive.
So first of all, with JavaScript, let's open up within our script area and set up an object called
stars.
And within this object, we're using documents, query selector.
We're going to select all of the elements with the class of stars.
Let's all of those elements that we created earlier and with class, don't forget to add in the dot
there to prefix it and then also selecting our output area.
So using our documents and this one, we only have one so we can use query selector selecting our element
with the class of output.
Next, let's loop through all of the stars.
So we've got a number of stars so we can do it in a number of different ways.
So this case, let's do a for loop.
So setting up our X and with stars.
So now we're going to have a node list that contains stars.
And if you actually want to see the node list, you can output into the console.
I'll show you how to do that.
So we're going to loop through.
And while X is less than the length of stars.
Because each node, just like an will have a listing of all of the elements and so we can also output
each one, we can also output each one as we loop through it.
So if we got stars and we can give it an index value of whatever is contained within X, so see how
that looks.
So refresh and you see that we're able to select each one of these stars.
So there's one thing that we do need to do and we need to add in a number.
So the order that they're being represented on the page, we want to add in an object value within that
star object of the value that it's showing up.
So the first star would be one, two, three, four and so on.
So we can pick up that value and we can use it whenever the mouse event is applied.
So looping through, we are putting all of those stars elements, and now that we've got those elements
so we can take our stars and X and we can apply some values to it, so we can call it star value and
we'll add in the value of X plus one into it.
So refresh.
And now we've got a hidden data value for each one of those.
Next, we need to apply some event listeners to that.
And there's a number of event listeners that we wanted to add in so we can add in event listeners like
stars and selecting out that object.
So adding in our event listener.
So adding an event listener of click.
And when we click the element, we want to invoke a function called Starret, its creator functions
so star right.
It's going to pass in the E value and we can console log out that evalu so see how that works.
So now when I click the stars, we get a value being passed in and we can also get a value of this.
And what that does is it outputs that element object from the page.
And because we've attached a star value to each one of those elements, we can use this.
And now when we click it, we get the star value that's contained within there.
So go ahead and add this into your project and you could be ready to move on to the next part of the
lesson where whatever it gets clicked, we can track what value got clicked of the different elements
of the different stars that are on the page.