Toggle Multiple Elements Classes?

Question

I want all the elements on my website with the class '.page' to slide to the left when I click the navigation button. It works with querySelector but with querySelectorAll it gives an error that it can't read it for some reason. I just want all the .page elements to add active to them.

<script type="text/javascript">
    function toggleMenu(){
        var menuToggle = document.querySelector('.toggle');
        var page = document.querySelectorAll('.page');
        menuToggle.classList.toggle('active');
        page.classList.toggle('active');
    }
    let home = document.querySelector("section.banner");

    window.addEventListener('scroll', function(){
        var value = window.scrollY;

        home.style.top = value * 0.5 + 'px';
    })
</script>

page.classList.toggle('active'); comes back saying it can't read it.

Any help would be appreciated, thank you

Can you add minimum reproducible [example](https://stackoverflow.com/help/minimal-reproducible-example)? — Rayees AC, Aug 24 '20 at 18:52
[`forEach`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach) — Heretic Monkey, Aug 24 '20 at 18:53
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, Aug 24 '20 at 18:53

score 0 · Answer 1 · answered Aug 24 '20 at 18:56

0

You can use for loop, try this,

function toggleMenu(){
    var menuToggle = document.querySelector('.toggle');
    var page = document.querySelectorAll('.page');
    menuToggle.classList.toggle('active');

    for(i=0;i<page.length;i++){
      var paging= page[i];
      paging[i].classList.toggle('active');  
    }
}
let home = document.querySelector("section.banner");

window.addEventListener('scroll', function(){
    var value = window.scrollY;

    home.style.top = value * 0.5 + 'px';
})

answered Aug 24 '20 at 18:56

Rayees AC

4,426
3
8
31

That returned some other error I forgot about, but I decided to change what I was doing. I wanted to add the class "active" to all items with the class "page", which meant individually moving every section of my website, but I decided to just put the whole page in one div with the class "page" so I could use querySelector again and only target one item. Thank you for your effort to help me – Ethan Nichols Aug 25 '20 at 20:19

Toggle Multiple Elements Classes?

1 Answers1