From the course: JavaScript: Enhancing the DOM

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Handling clicks

Handling clicks

From the course: JavaScript: Enhancing the DOM

Start my 1-month free trial

Handling clicks

In the last movie, we were able to center these images inside the overlay but there is no way of getting rid of them. If I try in to click on any of these, nothing happens. So I need to check for an event when I click on these images that gets rid of the overlay and the image and shows the background. So let me go ahead and do that. I'm going to come of here and into my code. And right here I'm going to addEventListener to the largeImage. So, largeImage and addEventListener. I want to listen for a click here and once the click happens, execute a function and that function is going to do some stuff. I also need to make sure that I pass it false so that it bubbles properly. And in here I need to check that this is going to happen only when the overlay exists. If the overlay exist what I want to do is remove the overlay. To remove the overlay, you have to use the removeChild function. You have to remember that removeChild doesn't work on the node itself. It works on the parent of the…

Contents