I have grid of similar cards with buttons. Every button has click event for launching modal window. When modal window has dissapeared, some logic performs. But an issue appears: when modal window appears and hides for second time, hiding function performs two times. When modal window appears and hides for third time, hiding function performs three times and etc. Why is this happening?
const detailBtns = document.getElementsByClassName('card__detail');
const modal = document.querySelector('.modal');
for(let i = 0; i < detailBtns.length; i++) {
const parent = detailBtns[i].parentNode;
detailBtns[i].addEventListener("click", function() {
windowLaunch();
});
}
function windowLaunch() {
modal.classList.add('open');
const hideModalBtn = modal.getElementsByClassName('modal__hide');
hideModalBtn[0].addEventListener("click", function() {
modal.classList.remove('open');
});
}<div class="grid">
<div class="card"><button class="card__detail">Add</button></div>
<div class="card"><button class="card__detail">Add</button></div>
<div class="card"><button class="card__detail">Add</button></div>
<div class="card"><button class="card__detail">Add</button></div>
</div>
<div class="modal">
<button class="modal__add">Add to basket</button>
<div class="modal__hide"></div>
</div>