More effective way to open and close modals with js-CodePudding

i'm still learning js, i'd like to find a way to reduce all the code i put below, i want to open different modals and close them in html.

In the Open modal section as u can see i made a function per modal where the "varEdit-button" is the ID i assigned to each button to open them and the "var-modal" ID is the one i assigned to each different modal container.

In the Close modal section the "close-varModal" is the ID i assigned to each close container and the "var-modal" again is the ID for each modal container.

I'd like to reduce the code with a for loop or maybe another property of js

For example i tried to close all the modals just by assigning the same class ".close" to all the close containers but only the first modal i opened could close and if someone knows why that happens with this language i'd appreciate it!

//OPEN MODALS
document.getElementById('imageEdit-button').addEventListener('click',
    function (){
    document.querySelector('#pic-modal').style.display = 'flex';
    });

document.getElementById('curpEdit-button').addEventListener('click',
    function (){
    document.querySelector('#curp-modal').style.display = 'flex';
    });

document.getElementById('phoneEdit-button').addEventListener('click',
    function (){
    document.querySelector('#phone-modal').style.display = 'flex';
    });

document.getElementById('addressEdit-button').addEventListener('click',
    function (){
    document.querySelector('#address-modal').style.display = 'flex';
    });



// CLOSE MODALS
document.querySelector('#close-picModal').addEventListener('click',
    function (){
    document.querySelector('#pic-modal').style.display = 'none';
    });

document.querySelector('#close-curpModal').addEventListener('click',
    function (){
    document.querySelector('#curp-modal').style.display = 'none';
    });

document.querySelector('#close-phoneModal').addEventListener('click',
    function (){
    document.querySelector('#phone-modal').style.display = 'none';
    })

document.querySelector('#close-addressModal').addEventListener('click',
    function (){
    document.querySelector('#address-modal').style.display = 'none';
    })

CodePudding user response：

One option is to give the open and close buttons an attribute, perhaps in the dataset, that specifies the ID or (unique) class of the element to open/close. For example:

for (const button of document.querySelectorAll('button[data-target]')) {
  button.addEventListener('click', () => {
    const target = document.querySelector('#'   button.dataset.target);
    target.classList[button.matches('.close') ? 'add' : 'remove']('closed');
  });
}

.closed {
  display: none;
}

<button data-target="imageEdit">open image edit</button>
<div id="imageEdit" class="closed">
  <h3>image edit</h3>
  <button class="close" data-target="imageEdit">close</button>
</div>

For additional sections, simply add more HTML, adjusting the data-targets as needed.

You could also tweak the logic so that a click on any of the buttons will toggle the current state of the target, if you wanted, simplifying the line inside the click listener to

target.classList.toggle('closed');