9.2 Event Listeners - Video Tutorials & Practice Problems

<v Instructor>In the last section</v> we got this palindrome detector working. You roll into the page and you're hit with this prompt. (keys clanging) And then we've got this alert that tells us whether or not it's a palindrome. In this section, we'll add the first, is several refinements in particular instead of hitting the user right away with a prompt, we're going to add a button that the user clicks. The way to do that is with an HTML tag called appropriately enough button. So let's put it in our palindrome.html file, palindrome tester and let's put in a button. (keys clanging) And we're going to give it an ID. In "Learn enough CSS and layout to be dangerous", we talked about how you should usually use classes for distinguishing one HTML element from another unless you're using JavaScript, which is exactly what we're doing right now. So let's give this an ID which has to be unique on the page. Only this element can have it. ID equals, let's say palindrome tester, (keys clanging) and then we fill it in with a text that's displayed in the button. (keys clanging) Just say, "Is it a palindrome?", and then a closing tag. (keys clanging) See if that worked. All right, we see the old HTML in the background. So if I click cancel, we should see the new HTML appear. Aha. Here's the button. So I don't know about you, when I see a button though, I tend to click it but nothing happens. That's not all that surprising. What happens when I click that button is that it fires off what's called an event. In this case, a click. So what we need to do is listen for that click. And then when the click happens, run our palindrome tester. So the first thing I'm gonna do is factor the palindrome testing code into a function. Its this here. (keys clanging) No arguments and then just move this stuff in there. We can make sure that's working. (keys clanging) Just call it like that. Okay. It's still working. (keys clanging) Not a palindrome. All right, so I used a very specific word. I said we were going to listen for that event. The reason I did that as I hinted in the introduction to this chapter is that we're going to add what's called an event listener. Specifically we're going to add it to the button. And in order to do that, we need a JavaScript object that represents the button itself. So let's take a look at how to do that. (keys clanging) Let's call it button and we're gonna let it equal. Well, how are we gonna find this thing? It turns out there's a very powerful method called query selector that lets us select specific items on the page. This is part of what's known as the document object model discussed before in "Learn enough CSS and layout to be dangerous". But it's a good idea to review it here. Even if you did do that tutorial it's always good to review something as fundamental as the document object model also known as the Dom. The Dom is a hierarchical model for understanding HTML elements. We've got the HTML tag, inside that the body tag and so on. And every one of these things can have CSS IDs and CSS classes. In this case, we have a CSS ID. Now in CSS itself, the way that you identify an ID is using the hash symbol, like this. (keys clanging) In a CSS file, if I just did something like this and put in some style rules this would style the palindrome tester element, that is to say the element identified by the CSS ID syndrome tester. In JavaScript, what I can do is write "document", (keys clanging) which is the overall document, (we'll talk more about this in a minute) dot "querySelector", camel case as usual and then a string, in this case, with the CSS ID. So what this does is it finds the actual element on the page. In this case, the one corresponding to the ID palindrome tester, which is our button. So what exactly is this object? Well, the answer is we don't really have to know. What's important is what we can do with it. In this case, we can add an event listener that listens for a click event and then executes code to do something after that click. So let's look at that here, (keys clanging) button dot add event listener, (keys clanging) the event is a click (keys clanging) and then it takes an anonymous function as your arguments. (keys clanging) And in this case we just want to run the palindrome tester, like that. Let's take a look. Cancel that. So here it's still running the palindrome tester. And the reason is because I've forgotten to run browserify. We can do bang, browser or bro or whatever to run the last command that started with those letters. Aha. Now it works. Is it a palindrome? Huh? Still nothing happening. Now, if you look at this, we've actually done everything right here. We've put a listener on click. We have the palindrome tester here. But if we look at the inspector, it says "TypeError: null is not an object". So that means that button here is somehow null. It's just nothing. And the reason is related to this thing I mentioned before document. This represents the actual document object model, the Dom. The problem is that when we roll into the page it's executing this code via bundle.js before the document has built. So there is no element with ID palindrome tester, when this code runs. The standard way to solve this problem is to add a second listener. One that listens for the event corresponding to the Dom content being loaded, which appropriately enough is called Dom content loaded. So we need to wrap this whole thing in another listener. (keys clanging) You can see it's camel case as usual. Takes into function. Anonymous function is your arguments. And then we just put this in there. (keys clanging) Let's see if it works. Aha. I clicked the button and I've got the dialogue. The prompt has appeared until now I can say (keys clanging) Radar is a palindrome. So it's working. All right. So we can see now just to review that we've added JavaScript code to listen for the event corresponding to the Dom being loaded. Then we select the button element using query selector. And then we add a second listener corresponding to clicking the button. By the way, there's a powerful library called jQuery, you may have heard of, that's really good at this sort of Dom selection and manipulation. And in fact, when I first started on "Learn enough JavaScript to be dangerous", I thought I was gonna have to cover JQuery. But in fact, query selector has gotten so powerful along with the closely related function "querySelectorAll". That in fact, JQuery is not necessary. And it's always a good idea to eliminate a third party dependency. if at all possible. Query selector wasn't always in the language, but its presence now, and our ability to write this kind of code without a third party library like Jquery is testament to the increasing power of JavaScript. All right, this is a great start. Now let's learn how to display the result in the HTML itself.