the for loop exit after it has been executed one time-CodePudding

the for loop in the following code exit after removing one class and doesn't remove the other one unless I click the button again

I want to remove the class hidden from 2 divs but I don't want to use querySelectorAll.

is there any way to do it using getElementsByClassName and for loop, without JQuery Just JavaScript

I did the same thing before but it was to change the style of something not to add or remove classes.


var items = document.getElementsByClassName('hidden');

let show = document.querySelector('.show-modal');

show.addEventListener('click', function(){
    for (let i = 0; i < items.length; i  ){
        items.item(i).classList.remove('hidden');  
    }
});

CodePudding user response：

Using a forEach would help -

show.addEventListener('click', () => {
    items.forEach((element) => {
        element.classList.remove('hidden');  
    })
});