In the previous lesson, we set up our TEMEL and we also set up our JavaScript objects that are relating
to the elements on the page.
So we've got one for each of the three elements that we have on our page.
And we do have a button.
But when we click the button, nothing happens.
And that's what we're going to do in this lesson, is we're going to make something happen.
So we do have that button element we output into the console in the last lesson just to ensure that
we do have the right content there for Button.
And now we can take the button object and we can add an event listener to it.
We need to specify what we're doing with that listener.
So we're listening for a click on the button.
And whenever the button gets clicked, we're going to invoke this function.
It's going to be an anonymous function because sitting within that event, listener there, and it's
expecting a function to be launched on the click trigger.
So now we need to know what we want to place within this function.
And this is where we want to start the gameplay.
So let's set up one more variable.
And this is going to be Aulet, because we're going to change the value of this is going to be a boolean
value and it's going to indicate whether the game is in play.
And once it's in play, then we know that we don't want the player to continuously start and the game
has started.
So that's going to be our indicator for the game starting.
So we're going to check to see if in play is false.
So we put that explanation, Mark, in front there to indicate that if it's false, then we're going
to execute the code in here.
And if it is false, then we want to turn in play to true so that the next time the buttons are not
going to do anything, you can keep clicking at as much as you want, because now this is going to be
true and we don't have anything else turning it back into false.
This button is no longer going to be clickable.
So we're only going to be launching this one time.
We can also take that button because the button is the element object play styles to it by using style
and then within style we can use display.
And so this is the same thing as if we went into our success and we made a selection of the button and
we just simply did a display, selected none.
So that would hide the button.
So it's going to do the same thing.
And you're going to see within the source code that that's going to update that code and we're going
to do all of this using JavaScript.
So let's try that out.
So refresh, we had start and it disappears, but when we go inspect for the code, you can see that
the button is still there.
But we've applied a display property, a style property of display, none so effectively hiding the
button.
When we add in that attribute, that style attribute, we can also output a message to the player.
So the player is probably wondering, OK, well, what's going on?
So we can add in a message.
And for this, we're going to set up a separate function to output messages to the player and then we'll
also launch the game.
So we're going to create a function in order to launch the game so we can do all of that.
And I'll show you how to do that in the upcoming lessons.
So for now, set up the button event listener at an event, listen to it, click it a few times, make
sure it's working, and then add in the different conditions here, checking to see if it's in play.
And then also you can apply the style of display none.
So that will hide it from the visible area on the screen.
So go ahead and add that into your project.