Hamburger menu issue

Question

I know this question might be asked a lot, but can someone help me with this one problem.

So the problem is that I'm trying to make a mobile hamburger menu and I want to make the onclick event happened when someone clicks on the icon.

function toggleMenuFunction() {
  let  getSidebar = document.querySelector(".sidebar");

    if(getSidebar.style.display === 'none'){
        getSidebar.style.display = 'block';
    }else if ( getSidebar.style.display === 'block'){
        getSidebar.style.display = 'none';
    }
}

I tried doing it like this and it won't do anything. Please can any one help me?

Answer 1

If you want to trigger a function when an element is clicked you need to write that too ;)

document.onload = () => document.querySelector(".sidebar").addEventListener("click",toggleMenuFunction);

the document.onload makes sure the listener gets attached after the document has fully loaded. Note: You can only have one document.onloadassignment in your code. It is almost always a good idea to write a wrapper function for that purpose. As in:

document.onload = () => { 
 document.querySelector(".sidebar")
   .addEventListener("click",toggleMenuFunction);
}