Trigger functions with event handlers

- [Instructor] More often than not, the things we want to do with JavaScript are associated with some sort of event. The easiest way to connect such an event to a function is to create what's known as an event handler. In the Exercise Files for this movie, 07_03, I have added a small alert to the call to action section which currently appears directly below the big button. You'll also notice the button has been collapsed. I want to add some simple functionality here, so the alert only opens when someone clicks the Book Now button, and then when they click the collapse button, the alert closes and the Book Now button appears again.

The actual hiding part is simple enough. If we inspect an element, you'll see the anchor inside the call to action box has a class called hide appended to it. If we scroll down in the Inspector here, you'll see hide sets the height to zero and overflow to hidden. That's why you're not seeing the text inside the class right now. If I remove the class, the Book Now button appears. We should be able to do the same with this section below here with the id-"booking-alert". To get the alert and the button to hide or appear, all we have to do is toggle this hide class on the elements, and we can do that using the class list toggle method.

Let's set up the basic function. First, I'll set up two constants, one for the button and one for the booking alert area. Next, I'll make my application resilient so that if someone comes to the sites and they don't have JavaScript enabled, they get what you see right now, which is just the alert.

But if JavaScript is enabled, then we see the Book Now button and the alert is hidden. I do that by simply removing the hide class from the button and adding the hide class to the alert. Now we can build a function to toggle the hide class on and off. I'll call it reveal.

Here, all I'm doing is grabbing CTA, classList and toggling, hide. Then I do the exact same thing for ALERT. Out of the box, the link CTA does not have the hide class and the ALERT has the hide class, and then we toggled them, so we switched them on and off, depending on when the button is clicked. Now comes the tricky part.

How do we get the button to trigger this script? The simplest way is through an event handler. First, we get the element itself, in this case, the constant, CTA, then we bind an event to it, in this case, click, and here we preface click with the word on to say onclick. Finally, we assign the function to be run without the parentheses at the end. By leaving out the parentheses, we insure the function doesn't run when the script originally loads.

Now I can save script.js, go back to the page and scroll down. Now we see the Book Now button and the alert is hidden. When I click on Book Now, let me skip to the top of the page, when I scroll down, you'll see now the Book Now button has been hidden and instead we see the alert. Click on the hidden button, Book Now reappears and the alert is hidden. But as you see, there's this super annoying issue with every time I click the button, I skip back up to the top. If you pay close attention, you can see in the URL bar I also get this little #, that's because this link here points to # right now, so a href is set to #.

What's happening here is the link is still working like a link in the browsers. The browser's trying to navigate to the next page, it just happens to be the same page at the top. That's because the link already has a default behavior, to follow the value of the href attribute. To prevent this from happening, we have to hijack the button behavior and stop it. When an event like click is fired, we can catch the event object as an attribute in the function that is triggered. The convention here is to give the event object the name e, and now, inside our function, we can refer to the event object, e, and then apply the prevent default method to it, so e.preventDefault.

This quite literally prevents the default behavior of the event object, and in this case the event object is a clicked link. That means when we now go down and click on the link, we stay where we were on the page, the alert box opens, the link closes, and then the alert box closes and the link opens again.