Welcome back.
In this lesson, we are going to be adding an event handler.
So, so far we've got all of the letters being output.
We've got a random character string here.
And we need to be able to guess what this word is by selecting the different letters and selecting those
letters should be clickable.
So that's what we want to add in in this lesson.
And there's one thing as well that we need to consider when we click the letter.
We don't want the player to be able to constantly click that same letter.
So effectively we want to remove the event handler.
So we're adding in the event handler and then we also want ability to remove it once it gets clicked.
So this is where it gets a little bit tricky.
And we wanted to add that event handler so we can add it as we've done before, where we do add event
listener and then the event listener is a click and then adding in a click, we're going to launch a
function we can call that handler.
So setting up that function, we can also within this function, we can remove out that event.
Listener So that's what's better to set that up as a separate function.
And then within that function we can remove out that handler.
And because we're still within this block of code, we can use the value of div within that handler
event function.
And JavaScript is going to know which value we're referring to, which element we're referring to,
so we don't have to select it again.
So we want to remove that listener.
And the event listener that we want to remove out is click and with the function of handler.
So now we should only be able to click at one time and console log out.
And again, I can use the parent object values so I can use temp.
And actually before we try to use it, we have to create it first.
So we need to put the handler after we've defined the function.
So let's try that again.
And so now each one of these letters, you can click it.
So I click Z and you see that I can't click it again so I can only click these letters once.
And that's exactly what we want to happen within this function.
So I can remove out the letter that's being clicked and we can add some additional functionality in
here as well.
So we can add in a class if we wanted to.
So let's create a class and just as we've done before, we add remove classes.
So within this class, I'm going to update the cursor.
So it's no longer the pointer when we update it just to be default cursor.
And I'm going to add also changing that color so it's faded out and updating the border to be white.
So it's not going to stand out as much anymore.
So when it gets clicked, when the element gets clicked, we want to add to that element.
And again, we already have that element selected as the div object because this is within the parent.
We can do a class list add and the class that we want to add is done.
So now whenever I click the letters, they fade out a little bit.
So go ahead and try this out for yourself.
Create a function that you can use in order to remove out that same event handler that you added into
that element when it gets clicked.