-3

I am trying to make a toggle menu and found this example(https://codemyui.com/responsive-sidebar-menu/) on Codepen. I would like to make the Jquery code into pure Javascript, but apparently there's something wrong with what I've written..

and this is what I've written(I made id for main and added Onclick function on the burger menu, that's the only 2 differences from the original):

    function toggle(){
        var main = document.getElementById("mymain");
        var button = document.querySelectorAll(".button");
        var sidebarItem = document.querySelectorAll(".sidebar-item");

        main.classList.toggle("move-to-left");
        button.classList.toggle("active");
        sidebarItem.classList.toggle("active");

        for(let i = 0; i < sidebarItem.length; i++){
            sidebarItem[i].classList.toggle("active");
        }
    }
jajaja
  • 1
  • 1
  • Your code isn't a [mcve] (e.g. there is no HTML). "[something wrong](http://idownvotedbecau.se/itsnotworking/)" is not a good description of the problem. There's no indication that you've made any attempt to debug this (hint: Adding console.log statements and explaining the difference between what you get and what you expect would be a good start). – Quentin Mar 07 '19 at 12:01
  • *looks again*. Oh. [Duplicate](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return). You code would throw a very obvious error in the console of your browser's developer tools. Mentioning that would have made the problem obvious. – Quentin Mar 07 '19 at 12:02
  • Possible duplicate of [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) – Jay Blanchard Mar 07 '19 at 12:06

1 Answers1

0

first, querySelectorAll give you a nodelist, not a nodeelement, so if you want to use classList, you need to loop over your nodelist. Try this : 

var button = [...document.querySelectorAll(".button")]
button.map( el => el.classList.toggle("active") )

i'm spreading the nodelist into an array, then i can use the map method

apply this on all your querySelectorAll elements

Julien Amblard
  • 121
  • 1
  • 3