This lesson we're going to be adding in how we're handling the button click right now when we click
the button, it says hello.
So that's not really doing a whole lot.
So we need to update this function.
So first of all, let's grab the event that triggered off.
This function and we can use the E target in order to get that element information, so when we click
it, you see that this is the element that made that trigger.
And we can also add in another button just for the fun of it.
And we can call this game, too.
And we'll call it new game, too, as well.
So we'll have two buttons there.
So this button shows up here, this button shows up here.
And in case we have more than one button, we need a way to distinguish which button it is and what
action we want to take on that button.
So if we want to distinguish the button, the big difference between the two buttons is the TEMEL or
the inner text, as well as they both have different classes associated with it.
So let's make use of that and we'll use a conditional statement to check to see if e target class list.
So this is looking through all of the classes of the elements that's going to see button our BTM advocacy,
the new game two or the new game, whichever one that we've clicked.
And we're going to check to see if it contains and this is the class that we're looking for.
So we're looking for new game.
So if it does, then we are going to do something in here with the code and we'll say console log.
So that has that will check to see if it contains new game.
And if you want to see what the output of that is, you can update it within the console as well.
So you can see.
So I just need to add in one more bracket there around a bracket.
So let's refresh.
So when we click this one, we get true.
And yes, when we click this one, we just get false.
So what this is doing is this is returning a boolean value and checking to see if that particular element
contains the class new game.
And if it does, then it comes back.
True.
And our conditional statement that if it is true, then we execute the code within the block and else
we could do an L statement if we wanted to as well.
So we check to see if it's got new game and it comes back.
True.
And that's why this code is being run.
So once we know that this is the right button to start the game, we can initiate the start game function.
So let's set up a function for that and start the game so we know that we're ready to start the gameplay
and will console log outs and I'll put start in so we should test that out and then I'll remove the
second button as well.
So we click the second button.
Nothing happens, the game doesn't start.
We click the first button, we get true.
Yes.
And the game is ready to start.
So go ahead and add this into your project.
Handle the buttons, check to use class list contains in order to check to see if your element has a
class of new game.
And if it does, then that should be the right button.
That's going to trigger off the start of the game.
And you can go ahead and you can get rid of the second button if you want as well.
We're not going to be making use of that.
So set that up, try it out.
And next lesson, we are going to continue to build this out and check to make sure that the content
is loaded, as well as bring in our data that we're going to make use of within the game.
So all of that is still yet to come.