Jquery 到纯 javascript

Question

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

Answer 1

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