How to create a modal popup using addEventListener?-CodePudding

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 >
  <img  src="./images/profile-avatar.jpg" alt="Аvatar">
  <div >
    <div >
      <div >
        <p >Jaques</p>
        <button type="submit"  onclick="toggle()"></button>
      </div>
      <p >Ocean researcher</p>
    </div>
    <button type="button" ></button>
  </div>

  <div  id="overlay">
    <div  id="popup">
      <button  onclick="toggle()"></button>
      <p >Edit profile</p>
      <input type="text" placeholder="Name" >
      <input type="text" placeholder="About me" >
      <button type="submit"  onclick="toggle()">Save</button>
    </div>
  </div>
</section>

CodePudding user response：

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