2 years ago

#73865

test-img

Ganda W Maung

Closing Multiple Modals Using For Loop In JS, But Not Working

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

javascript

dom

0 Answers

Your Answer

Accepted video resources