Interactive online courses HTML Academy
2026-03-09 10:57 Diff
https://htmlacademy.org/courses/javascript-browser/events/hide-popup

We added a handler, and now the popup opens if you click on the "Show the contact information" button. Let’s make sure that the popup closes when we click on the “X” (the button with the button-close class).

To do this, let’s carry out the familiar series of actions: find the button, write it to a variable, and add a click handler to it. When we click it, we can delete the modal--show class from the popup so that it closes.

We already know how to add classes to elements, but how do we delete them?

We need to use the familiar classList object. If we use the add() method to add the class, then we need to call the remove() method to delete it. We will pass the string with the class that we want to delete to it. The following is how we can express this in code form:

var popup = document.querySelector('.popup'); // Include a period before the selector name. popup.classList.remove('popup--open'); // Do not include a period before the class name.

The result in the markup is the same as when we delete the class manually.

<!-- Initial state of the markup --> <section class="popup popup--open"> … </section> <!-- State after classList.remove is called --> <section class="popup"> … </section>

Find the button using querySelector. We are not going to search the entire document, but just inside the popup element. We know for sure that the button is there, so it would be excessive to run a search across the entire document. This is a resource-intensive operation, because the document may be very large.

Add a button click handler with the button-close class, and check that everything is configured correctly and that the popup actually closes. We will not specify the evt parameter in this handler, since we are not going to use the event object inside the handler function. The button-close element is a button. It has no default actions that have to be cancelled.

By the way,

pay attention to the fact that we write a dot when we search for an element by selector, but we do not write a dot when deleting or adding a class. It is important to remember this rule. To make it easier, you should remember that the classList.remove and classList.add names are self-explanatory. We are doing something with the element class, so the only thing we need to do is pass the string with the class name. And there are various ways of searching for the element written after querySelector. We already discussed them before. Therefore, we write a dot before the name of the class to explicitly indicate that we are searching for classes and not for tags or anything else.