I am trying to close all of my modal windows using the for loop but somehow it is not working, kept showing me on console that it is undefined or false instead of true. I have wrote attached my script down below.
const detailMain = document.querySelector('.detailsBtnMain');
const detailBtnSubs = document.querySelectorAll('.btnDetails');
const closeBtns = document.querySelectorAll('.closeBtn');
const modalMain = document.querySelector('.modalWindowMain');
const modalSubs = document.querySelectorAll ('.modalWindow');
let openModals = function(e){
e.classList.contains('hidden') ? e.classList.toggle('hidden') :
e.classList.toggle('hidden');
}
let closeModals = function(e){
e.classList.add('hidden');
}
detailMain.addEventListener('click', function(){
openModals(modalMain);
});
closeBtns[0].addEventListener('click', function(){
closeModals(modalMain);
})
for (let i = 0; i < detailBtnSubs.length; i++){
detailBtnSubs[i].addEventListener('click', function(){
if (detailBtnSubs[i].classList.contains('secondary')){
openModals(modalSubs[1]);
} else if (detailBtnSubs[i].classList.contains('third')){
openModals(modalSubs[2]);
} else if (detailBtnSubs[i].classList.contains('fourth')){
openModals(modalSubs[3]);
} else if (detailBtnSubs[i].className.contains('fifth')){
openModals(modalSubs[4]);
}
})
}
for (let i = 0; i < closeBtns.length; i++){
closeBtns[i].addEventListener('click', function(){
if (closeBtns[i].classList.contains('secondary')){
console.log('true');
}else {
console.log('false');
}
})
}