This lesson we're going to make, those elements that we're creating on the fly interactive, so back
where we're creating this dynamically within the box, we can use the L object as we're creating it
to add an event listener and using the event listener.
So we're listening for a click.
And if it's a click, then that means that the element got hit and we're going to invoke the function
that's hit.
So we've got a function hit we're passing in the event object.
And you can see that when you do console like E Target, it's going to output the contents of the element
that got hit.
So when we refresh and open up this bigger, so now when I click this, I can clear this out.
When I click that element, you can see that that click event happened and I got the contents of that
element.
And you can see this is the exact element that we created.
So we can add an event listener there.
We can get the target.
And this is also the point where we can get the end time.
So we've got our end time.
And just as we did, setting up the new start time, we can get the end time using the get time method
built in in JavaScript.
And in order to get the duration, we can take the end time minus the start time and the start time
again is coming from that global value over here.
And we're going to divide it by 1000 because it's going to be in milliseconds, so we want it within
seconds.
We also need to clear out this play area timer so that that will clear out, so that's timed out, it's
already run, but we want to clear that out using the clear timeout.
So in case it hasn't cleared, it'll clear now.
And we need to remove this element from the board, so let's select our game area, and this is we're
going to traverse a little bit within our dorm.
We're going to go to the children and we go game area children.
We see that all of the children are going to be represented.
So, first of all, let's put that into the console when it gets hit and you'll see that we're able
to select the children and it only has the one child, which is that element that we're creating dynamically.
So when we click it a clear what's in the console there and when I click it, we see that it is it does
have that same element.
So that representation that we have there where we're using the game area children and the first child
is that element because we're depositing into the game area and we don't have anything else but that
in there.
So we know that we've selected the right element and the next we can simply remove that element using
the removed method in JavaScript.
So really easy.
We just do a remove method and this is going to remove that element from the game area.
And next, we need to launch the next one, and that's where we can launch that once again.
And we can also set it to a timer as well so that the player doesn't know when the next one is going
to appear.
So will refresh.
And once we hit start.
So the games and play now.
And we clicked it, we clicked it, we clicked it, and one thing that's missing, we're not outputting
the duration out to the player, so they have no idea how quickly they're hitting it.
So that's what we're going to use our messenger function that we created earlier as well.
And we're going to simply output the duration.
It took and then duration, whatever the value is.
Seconds to click.
So there we go, we have our game, we can start.
And we see it took point two point five seconds to click, took five point six, four seconds to click,
that one took eight point zero four seconds.
That one was 11 seconds.
So something's going on here that we're not resetting the start time.
And I'm actually going to take care of that because we're continuously adding into the start time and
within JavaScript as we're creating this element, I can add in a time value within that element.
So it's all contained within that same area.
So I can save myself a little bit of hassle there and get rid of the time in there.
So I don't need to log that information and I don't need to use the global variable.
And when I return back that event object, I can use whatever the start time is.
So I can do let start.
And then from here I can return back my start time.
And this time it should be resetting it for each element, so as you can see, we're resetting it for
each element.
So the click times are relevant to each and every one.
So they're not cumulative anymore, and this is another way that we can attach values and variables
into that element object as we're creating it, and that reduces the need for having this global start
value that we no longer need.
And we can also condense this a little bit further as well, where we can combine the inplay into the
object and really condense all of a lot of the functionality that we have within one.
Within one object value.
So coming up next, we'll do a quick code review and an overview.
Go ahead and add in the hit option into your game so that you've got the gameplay fully functional and
working.