All language subtitles for 073 Handling Click Events.en_US1

Let's now make our application actually do something

when we click on the Check button.

So this is going to be the first time that our code

reacts to something that happens in the DOM.

And for that,

we need to use an event listener.

Now, an event is something that happens on the page.

For example, a mouse click,

or a mouse moving,

or a key press,

or many other events.

Then, with an event listener,

we can wait for a certain event to happen,

and then react to it.

So let's try it out now.

And let's actually start by getting rid of this code

because this has actually nothing yet to do

with the application.

But now we will actually start developing

the application step by step.

Anyway, in order to listen for events,

we first need to select the element

where the event should happen.

And in this case,

we want to listen to the event on this

button element here,

so this Check button.

Because this is where the click

that we're interested in will happen.

So when we click on this button,

something should happen.

So let's select that button element.

So querySelector.

And then once more, we need to go ahead

and grab the class name of this button.

And so here it is.

Now here, we actually have two class names,

we have button and check.

But the button class here is the more generic one,

which also applies to this other button,

this Again button here.

So the class that we are interested in

is just the check class.

So again, the dot for the class selector,

and then check.

And so this will select the button element itself.

So just as before,

this here will then return an element.

And now on that element,

we can call the addEventListener method.

So addEventListener.

And this is a method

and so we need to call it once more using the parenthesis.

Now, there are actually multiple ways

to listen for events in JavaScript.

But using this addEventListener method

is the best one and also the most used one.

Okay.

Now into this addEventListener method,

we first need to pass in the type of the event.

And in this case, it's just a simple click.

So the name of the event is actually Click,

and so that is the first argument

that we pass here into this function.

But now, we actually need

to tell the event listener what to do.

So basically, we need to specify the reaction

to the Click event.

And we do that by defining a function.

And that function will contain exactly the code

that should be executed whenever this click event happens

on this Check button.

And that function is going to be called the event handler.

Now, this method, this addEventListener method here

is a special kind of function.

That's because as a second argument,

it expects this event handler function

that we just talked about.

So again, here as the second argument,

we now need to pass in a function value as an argument.

And that's probably quite confusing, I know.

But that's no problem at this point.

This will make more sense,

as we do this over and over again.

For now, just remember what you learned

in the fundamental section,

which is that a function is also just a value.

And if a function is just a value,

then we can also pass it into another function

as an argument,

just like any other value,
like a string or a number.

So let's create that function here.

And just like before, we do that writing function,

and then the curly braces for the function body.

Okay.

And now all we have to do is to specify what should happen.

And to start, what we want to happen

is to simply log to the console,

the value that is here in this input field.

So console.log,

document.querySelector.

And actually, we already have this code up there,

but let's just write it again.

So remember that this element here has the class guess.

And then from this element, we take the value.

Okay?

And that's it.

So let's save it.

Let's test it, and then we will just go over this again.

So I will write nine.

And now when I click this button,

this nine should appear down here in the console.

And it does.

Okay, great.

Great job.

So let's quickly go over this again.

So we selected this button here using querySelector.

And then we use the addEventListener method on that element

to attach an event handler.

And that event handler is this function here.

Okay, so this is, again, just a function expression.

So it's similar to when we do just, for example,

this and then just log something to the console.

So this is also just a function value, right?

And then we can assign that to a variable.

And then we call all of this a function expression.

You will remember that, right?

And so here, basically, we did the exact same thing.

So we wrote here a function

that has a similar format as this.

We simply did not assign it to any variable.

Instead, we passed it directly here

into the addEventListener method.

So as the first argument,

we had the name of the event that we're listening for,

which is a click.

And then as the second argument,

we have this function value.

And this function simply contains the code

that we want to execute whenever the event happens.

Also, note that we do not call

this function here anywhere, right?

We only define the function here,

and then pass it into the event handler.

But it is the JavaScript engine

who will call this function as soon as the event happens.

Okay?

That's important to understand.

So again, this function will not be called immediately

once the script here is executed.

This function will only be called

as soon as the event happens.

And you can also see that here in the code,

because, well, we don't call the function anywhere

using the parenthesis, right?

And so, now, again, we're just really passing it

into the addEventListener function.

So this works just fine.

Now, let's try here, another number.

So now we get 99.

And of course, we can also do some DOM manipulation here.

For example, let's just, for example,

grab this piece of code here and paste it here as well.

Give it a save.

And now when I click this here,

not only the value from this input field

will get logged to the console,

but also this message here will change.

So the text content of this element.

So you see, correct number and now 22.

Now, of course, this has nothing to do with the game yet.

So I just wanted to show you that.

But let me get rid of this, actually.

But now let's actually start to slowly build up the game.

So in the real game,

when we click on this button here,

of course, this number from this input field

will have to get retrieved.

So let's start with that.

And so we already did this here,

but instead of just logging it to the console,

let's actually save it into a variable.

So const, guess, and then equal this.

Okay?

And now let's log it to the console just so we see it.

And so this should now do the exact same thing.

But we first stored that value into a variable,

and then we log it afterwards.

All right.

Now, remember how I said in the fundamental section,

that usually whenever we get something

from the user interface, for example, from an input field,

it usually always is a string.

So let me show that to you here now.

So again, we use the type of operator

that we already learned before.

And now when I put this here, we indeed get a string.

However, we will eventually have to compare this number here

with a randomly generated number.

So that's going to be basically the secret number

that we will have to guess.

And so if we want to compare numbers with numbers,

we need to first convert this string to a number.

So let's do that here, using the number of function

that we also already used before.

And so now, let's print both here.

So the guess and then the type.

And now we get five.

And now it's also here in purple,

and we get that it's a number.

And now, let's start to implement the game logic

here a little bit.

But just the simplest case,

which is the case that there's a actually no guess.

So usually in an application like this,

which has an input value from the user,

the first thing to do

is to check if there actually is a value.

And if there is no value, well,

then we can print something to the console as a response.

So we can say, if there is no guess.

And let me actually show you how that would look like.

So if I click on the button now, indeed, we get zero,

and zero is a false value.

Okay?

And so guess our here, in this logical context

of the FL statement, will be false.

So that's what we learned in the fundamental section, right?

So any value that is here in this condition part

will always get evaluated to a Boolean.

And so since this guess, is zero, in this case,

and zero is a false value, it will be converted to false.

But we want something to happen whenever this is false.

And so here, we actually want a true value, right?

And so we simply use the negation operator

to then invert this Boolean from false to true.

So in this case, we can then print some sort of message

here to our message field, or message element.

And so let me, again, go ahead and copy it from here

because we already did that before.

So let's say no number.

And then as always an emoji here.

Let's do this one.

Or actually, it's more like forbidden.

So that's the one I used.

Let's save it.

And so now whenever I click this button, let's check it,

then indeed, we get no number.

Okay?

So again, this works because zero is false

And so guess here is false now.

But then we use the NOT operator to convert it to true.

And like this, we can then make this block of code execute.

Because remember, it only executes

whenever this whole condition here is true.

Okay.

And so with this, we implemented the first scenario.

So again, usually, the first scenario

is always to assume that there is actually no input,

and then we need to respond to that somehow.

Now, in the next video,

we will then implement all the other scenarios,

for example, where this guess here is actually correct.

So where it's equal to the secret number.

So we will have to generate that secret number then

and compare it to the guess.

But let's leave that to the next video.