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 you 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';
})
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');