In the previous lesson, we saw how we can generate this cube with the different color blocks within
it.
And now we want to make these elements that we've created using JavaScript to be interactive.
Now, of course, you could build these elements and then loop through them from the DOM and then add
event listeners that way.
But there is a much easier way where we can add the event listener as we're building out those elements.
So we've got an object called d'Hiv that we're creating an element out of, and we can add an event
listener directly in that element as we're creating it.
And I'm going to just simply check answer.
So run a function called check answer.
So we need to create that function as well.
Usually whenever I create a function, I like to always have the corresponding function already ready
to go.
So that usually avoids the errors of wondering what happened to that function that I've created.
There's a few other things that we need to add in, and I also want to set the opacity style of these
elements because I want it to go a little bit lighter.
I don't want it to be a full color opacity.
So this is where we're selecting the style.
And just as we updated the background, we can update the opacity of the style and opacity, five point
zero.
Sounds like a good number and obesity can be anywhere from zero, which would be completely not visible
to one.
And I also want to add in a hidden value where we're just going to add into the object the divx that
we're creating and add in whatever the value of game colors is, because we probably will need this
as we check the answer that we want to return back, whatever that color is.
And I'll show you how that works.
So now within the console.
We can pick up we can pick up the element that's being used to create a brand new function, call it
element, so we're getting E target and that accesses the element that invoked the click.
So we're getting all of that E target information, sending it in as element and a first show you what's
being contained within there.
So now when I click any of these, we get all of that element information and you notice that my color
is not listed anywhere.
That's because that's hidden and we actually can access it using JavaScript.
So it's kind of hidden in the background there.
And now when I select my color, I know which color was clicked.
So I can see yellow got clicked, blue got clicked, red got clicked and green got clicked.
So go ahead and add these updates into your own project where when you're generating the div, add in
the event listener, as well as adding that hidden value within that element object and then pick up
that information using the Czech answer function the same way that I've done that within the code.
So add that in, try it out, make sure it's working.
When you click these boxes that you're seeing what the color is that you've clicked.
And coming up next, we're going to continue to build out this game application.