We have a button that we created in the last lesson and we can click it, but it doesn't do anything
yet.
So in this lesson, we're going to be adding in event listeners to treat some type of interaction and
action with that button element.
So going into our ED, we're going to select our game message area.
And this is going to be that same element that we're clicking and add an event listener to it.
So adding an event listener and the event listener that we're adding in is a click event listener.
And when it clicks, then we want to invoke a function called start.
We also want to have the same event listener to the start screen.
And depending on how you've built out your application, you might not even need both of them.
But for now, I'm going to keep them both in as we have developed it with the start screen.
And then we've got our game message right after that.
So one of them could be hidden.
It all depends on how much messaging you need within your application.
Also, let's add an event listener to the document object.
So this is if the key gets clicked anywhere while the document is open, then we're going to invoke
the key down function and we can just call this one press on.
And we also going to add in another key function.
So this is the key up function.
And this one, we can have a function called press off.
So what these are going to do is this is going to track the key presses that the players pressing.
So when they're pressing the key down, then we're going to update our active object with that value
and with a key up, we're going to remove that value from our active object.
So now we need to create some functions now that we're referencing them within our code.
We've got our basic start function.
We also have our press on function and then we also have our press off function.
And usually the way that I like to do it is I like to add in console messages just to make sure that
everything is working properly or as expected.
And this one can be on and that one can be off.
Save that and try it out.
So now when I press on here, I get a start.
So it's what I want if I press a key on my keyboard and obviously you can't see that, but you have
to take my word for it.
I am pressing the spacebar.
So while I'm holding it down, I'm invoking and firing off that on value.
And when they let go, I get off.
So now next we need to track which keys are being pressed and then ultimately create our interaction
with the keys that are being pressed.
But before we do that, when we cross the start button, we're going to take our game message element
and update one of the classes.
So using the class list method.
And what this does is this allows us to update a class list on an element and we're going to use ADD,
which, as the name implies, adds a method of height to it.
And remember, what height is going to do is it's going to hide that element.
So now when we press start, we press the start screen, we're going to be hiding that element.
So we're hiding the game message element, which is already hidden.
And we also need to hide the screen because remember, both of them are going to the same function.
So let's add that in as well.
So we want to hide both of those.
And we know that one is already hidden, the game messages already hidden.
But this is just in case when we have our restart of our game, we're going to have a content within
the game message.
So we need to make sure that it is hidden.
So let's try it out.
So refresh and we see the button disappears and that's exactly what we want to happen for.
Now, go ahead and add in event listeners into your code and you'd be ready to move on to the next lesson.
We're going to track the key presses and take actions accordingly.
So that's coming up next.