Handling Click Events | JavaScript 🔥 | Lecture 067

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 se

lect that that button element so query selector 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 add event listener method so add event listener 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 add event listener method is the best one and also the most used one okay now into this add event listener method we first need to pass in the type of the event and in this case it's just a simple c

lick 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 Advent lis

tener 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 a 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 f

unction 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 dot query selector 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 9 and now when I click this button this 9 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 query selector and then we use the add

event listener 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 remember that right and so here basically we did the exact same thing so we wrote here a function that ha

s a similar format as this we simply did not assign it to any variable instead we passed it directly here into the add event listener method so as a 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 yeah again we're just really passing it into the add event listener func

tion 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 locked 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 t

he 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 a 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 an

d 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 c

ompare 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 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 5 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 is 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 0 and 0 is a falsy value okay and so

guess here in this logical context of the if else 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 0 is a falsy 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 f

alse to true and 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 there's 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 0 is faulty 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 i

s 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 gas but let's leave that to the next video