如何使用 addEventListener 创建模态弹出窗口？

Question

i'm studying JS at the moment so i don't know a lot of things about it. i created a page with an "edit" button. when i click on the button, it should appear a popup:

• with toogle() i could do it

function toggle() {
var overlay = document.getElementById("overlay");
overlay.classList.toggle("active");
var popup = document.getElementById("popup");
popup.classList.toggle("active");}

• but the exercise require the use of addEventListener.

i'm trying to do it, but i can't figure it out how to make appear the popup, with the following code the console doesn't show any error but i don't see the popup

const overlay = document.querySelector(".profile__edit-form-overlay");
const popup = document.querySelector(".profile__edit-form");

popup.addEventListener('click', function() {});
overlay.addEventListener('click', function() {});

this is my code:

 .profile__edit-form-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; content: ""; width: 100%; height: 100vh; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.5); z-index: 10; visibility: hidden; }.profile__edit-form-overlay#overlay.active { visibility: visible; }.profile__edit-form { position: fixed; top: 21.08%; right: 33.5%; left: 33.5%; display: flex; flex-direction: column; justify-content: center; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); border-radius: 10px; width: 33.59%; min-height: 330px; opacity: 100%; z-index: 20; visibility: hidden; }.profile__edit-form#popup.active { visibility: visible; }

 <section class="profile"> <img class="profile__avatar" src="./images/profile-avatar.jpg" alt="Аvatar"> <div class="profile__block"> <div class="profile__info"> <div class="profile__first-line"> <p class="profile__name">Jaques</p> <button type="submit" class="profile__edit-button" onclick="toggle()"></button> </div> <p class="profile__text">Ocean researcher</p> </div> <button type="button" class="profile__add-button"></button> </div> <div class="profile__edit-form-overlay" id="overlay"> <div class="profile__edit-form" id="popup"> <button class="profile__edit-form-close-icon" onclick="toggle()"></button> <p class="profile__edit-form-text">Edit profile</p> <input type="text" placeholder="Name" class="profile__edit-form-first-field"> <input type="text" placeholder="About me" class="profile__edit-form-second-field"> <button type="submit" class="profile__edit-form-submit" onclick="toggle()">Save</button> </div> </div> </section>

Answer 1

try

document.querySelector('.profile__add-button').addEventListener('click',function (){
        document.querySelector('.profile__edit-form-overlay').style.visibility = 'visible';
    })

the listener is on the button.profile__add-button

remove visibility in css style.profile__edit-form