Events Exercise

[00:00:00]
>> Okay, so let's try out our newfound event handling powers. What we're gonna do is, just for right now, we're not actually gonna put this code in our text file, in our HTML file, we're just gonna try it out in the console on our quiz page. So I have this my in progress quiz page, we're gonna try out a couple of different event handlers.

[00:00:23]
So, see if you can try doing any of these things. For example, we could capitalize the text of a button when it's clicked, or we could change some text to be hovering or to be some other thing when the mouse moves over the element. So let's take a moment, a couple of minutes to try this out, and then we'll talk about some handlers we could attach here.

[00:00:56]
Let's try it out. So how about capitalizing the text of the true button when it's clicked? So what element am I gonna need to attach the event listener to?
>> Mine's B, cuz it's button is 0.
>> Okay, so maybe I already have a variable kind of capturing this.

[00:01:21]
Do I have, I have optionButtons, I could get optionButtons[0], for example, is the true button. Yeah, cool. So let me, I'm just gonna capture that, And a variable. Okay, so how can I add a listener to the click event on this true button?
>> trueButton.addEventListener.
>> .addEventListener, and JavaScript's already helping me out.

[00:01:52]
And then what's the first argument I need to pass in?
>> Mouseover.
>> So in this case, we want to do something when somebody clicks the button. So the name of the event that we want is, I think you were about to say it, Jay.
>> Click.
>> Click, exactly.

[00:02:07]
Now, we could attach a mouseover handler to this button also, but in this case, we were saying, let's try to do something when the button is clicked. So we can have click. And then what we wanted to do is capitalize the text of the button. So we're gonna need to give a handler function that does just that.

[00:02:27]
So how can I declare my handler function using our good friend, the fat arrow? What do I need to type here?
>> Open parenthesis event.
>> Open parenthesis, and we could capture the event, if we want to. Let's see if we're gonna need it. And then =>. And now, since I might want to put multiple lines of code in this arrow function, how can I do that?

[00:02:59]
>> Curly braces.
>> Curly braces, exactly, nice. Okay, so now I've got my body of my function, and now, what I wanna do is capitalize the text of this button. So does anybody remember how we can do that, yeah?
>> textContent.
>> Okay, so trueButton-
>> .textContent.
>> textContent.

[00:03:25]
>> And then you would just = trueButton.textContent.toUpper
>> So trueButton.textContent, sorry, you said, toUpperCase.
>> UpperCase.
>> Like that? Let's try it out. Okay, I'm missing something here. And my syntax, I've tried to press Enter and it wouldn't even let me cuz I'm missing something, anybody noticed what it is?

[00:03:53]
>> It's an ending.
>> An ending parenthesis, yeah. So what we had here, and we'll see that the console is somewhat helping me out. I had initially opened the parentheses, but then when I added more parentheses around my events here, it closed them, it auto closed them for me.

[00:04:10]
So I needed to add that extra closing parenthesis. And then yes, I could put a semicolon also. So now, let's see what happens. We did it, lovely. Okay, how about doing something when I move my mouse into the h1 element? So the h1 element here is this Quiz.js at the top of the page.

[00:04:34]
So what I want to happen is, basically, when my mouse goes in to the Quiz.js, I want to change it to hovering. So what event did we just see a minute ago that indicates when your mouse has entered an element area on the page?
>> Mouseover.
>> Mouseover.

[00:05:00]
Okay, so let's grab my h1 element, first of all, how can I do that? We have our good friend, document. And let's check out our inspector, what do we have to work with in this h1? Well, we don't really have any ID or anything like that, so I guess I’m gonna have to use the name h1, the tag name here.

[00:05:27]
Couple of ways I can do that, but does anybody remember one of them, to grab that h1 element out of the document?
>> GetElementsById.
>> ByName.
>> So we don't actually have an ID on this element, so unfortunately, that's not gonna work here. The other suggestion was?
>> ByName.

[00:05:47]
>> ByName, okay, so let's keep in mind, we have two very similar things. We have getElementsByName, which is looking for the name attribute on the element, which unfortunately we don't have here. But we also have getElementsByTagName, which is gonna look for the actual HTML tag that this element is.

[00:06:11]
So we could use that one with h1. But now, what happens if I run this code like this? What is the value of h1 gonna be? Is it gonna be a single element? Let's find out. Okay, let's take a look. So now h1 is, so it's actually a collection of elements, or essentially kind of a grouping of elements.

[00:06:40]
It sort of functions like an array of elements because we had getElementsByTagName, plural. So if I want to change the value of my h1 variable to be just the h1 element, which is essentially the only thing inside of this collection, how can I do that? Reassign the variable to, The first thing in an array or a list of things?

[00:07:08]
>> Index 0.
>> Index 0, yeah. So I can do that by grabbing my current value of h1, and then using square brackets to ask for the item at index 0, right? So let's see now, h1 is this h1 element. Great, okay, cool. So now, how do I attach an event listener that's gonna know when my mouse has moved over that element?

[00:07:34]
Let's make some space. So I'm gonna do h1.addEventListener. The first thing I need to pass in is the name of the event, which is?
>> Mouseover.
>> Mouseover, in this case. And then we're gonna have another arrow function. And in this case, we're not really gonna even need the event object too much, so I'm just not including it.

[00:07:58]
And now, we wanna change the text of h1, which is pretty similar to what we did before, we had textContent. Yeah, we could use, for example. And then I think we said we want to be hovering. Okay, does this look right too, folks? I'm seeing some nodding. Let's try it out.

[00:08:25]
Okay, so now if we did our jobs right, now, up, there it went. Look at that. Now, what happens? Now, right now, I'm still hovering over this element, what happens when I leave it? What do you think is gonna happen when I move the mouse away from this element?

[00:08:42]
I heard nothing, and I saw shrugs. Exactly, yes. So right now, we've only listened to the mouseover event, which just listens for, basically, the first time the pointer moves over that element. So if we want to change our text back to, I think it was Quiz.js, we can listen for another event.

[00:09:02]
Does anyone remember what it was? Karl?
>> Mouseout.
>> Mouseout, yeah. These are just, eventually, you'll get used to the names of these events, it's pretty arbitrary. But yes, there is another mouseout event. So by this point, we're getting pretty used to it, so I can attach my listener, mouseout.

[00:09:21]
And then I can do something else to the textContent, like put it back to Quiz.js, for example, okay? So now, up, Up, up, up, up, it's fun. [LAUGH] We've got something happening on our page now. So now, this is a pretty simple one, it's just changing the text.

[00:09:48]
But you can imagine that this is the same skill you would need to do those fancy effects that web pages you've seen do when you hover over an element and it glows or whatever. We can do whatever we want, we can apply CSS, we can change the content, we can do other things.

[00:10:03]
So look at our superpowers now, amazing. Now, what do you think is gonna happen if I refresh the page? Are these events still gonna to be listened to? No, I'm seeing shaking heads. And indeed, no, because I did this all in the console, the lifetime of that is only while this particular document exists.

[00:10:27]
So if I want to make these kinds of changes part of my webpage that's always there, we're gonna have to put them in our text file. Okay, so now, it's handled, our events are handled. And we can take this and we're gonna need a couple more things in order to make our quiz game actually respond to the user's answer.