How can I change tag div to tag button to activate menu with js function?-CodePudding

I have a side menu that appears when I click on a div tag. Everything works fine. However I would like to change <div id="togglek"></div> to <button id="togglek" onclick"MyFunction()"></button> I tried, but with the button tag the menu doesn't appear.

Is there any way to change from div to button? I'm sure the script will need to be changed a bit, but I don't know how. Sorry, I'm new and trying to learn as much as possible.

I appreciate any response, thanks.

    const togglek = document.getElementById('togglek');
    const sidenav = document.getElementById('sidenav');
    
    document.onclick = function(e){
        if(e.target.id !== 'sidenav' && e.target.id !== 'togglek' ) {
          togglek.classList.remove('btnactv');
          sidenav.classList.remove('active');
          overlay.classList.remove('bgover');
        }
    }
    
    togglek.onclick = function(){
        togglek.classList.toggle('btnactv');
        sidenav.classList.toggle('active');
        overlay.classList.toggle('bgover');
    }

/*Overlay*/
#overlay {
    position: fixed;
    height: 100vh;
    top: 0;
    background: #000;
    z-index: 999;
    transition: 0.3s;
}

#overlay.bgover {
  left: 0px;
  width: 100%;
  background: #000000d1;
}

/*Toggle Button*/
#togglek {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-end;
    font-size: 18px;
    margin: 10px;
    padding: 10px;
    position: absolute;
    top: 10px;
    right: 20px;
    border: 1px solid black;
    
}

#togglek::before {
    font-family: fontAwesome;
    content:'Open';
    color: #000;
}

#togglek.btnactv::before {
    font-family: fontAwesome;
    content:'Close';
    color: #000;
    z-index:1000;
}

/*Sidebar*/
.sidenav_box {
    margin-top: 5%;
    padding: 25px;
}

#sidenav {
    position: fixed;
    top: 0;
    left:-100%;
    width: 80%;
    height: 100vh;
    background: #fbfbfb;
    transition: 0.3s;
    z-index: 1000;
}

#sidenav.active {
    left: 0px;
    width: 80%;
    background: #fbfbfb;
    box-shadow: 5px 0px 15px 0px #00000021;
}

/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
}

/*Menu header info*/
.display.name {
   font-size: 15px;
   font-weight: 500;
   color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Text Link css*/
.user_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: #75777d;
}

.user_menu.item:hover > a {
    color: #2e323a;
}

<div id="togglek"></div>

<div id="sidenav">
 <div > 
 
    <div >
        <span >Hello User</span>
        <span >[email protected]</span>
    </div>   

     <hr >  
     
    <div >
        <a href="/account">
         <i ></i>
         <span >Dashboard</span>
        </a>
    </div>
    
     <div >
        <a href="ordini">
         <i ></i>
         <span >I miei ordini</span>
        </a>
    </div>
    
    <div >
        <a href="libreria">
         <i ></i>
         <span >Downloads</span>
        </a>
    </div>
    
    <div >
        <a href="impostazioni">
         <i ></i>
         <span >Impostazioni</span>
        </a>
    </div>
    
    <div >
        <a href="wp-login.php?action=logout">
         <i ></i>
         <span >Logout</span>
        </a>
    </div>
    
  </div>
</div>

<div id="overlay"></div>

CodePudding user response：

It seems your issue is that you aren't defining a function of myFunction you can simply change the div to a button and use the existing onclick code and it still works as shown:

    const togglek = document.getElementById('togglek');
    const sidenav = document.getElementById('sidenav');
    
    document.onclick = function(e){
        if(e.target.id !== 'sidenav' && e.target.id !== 'togglek' ) {
          togglek.classList.remove('btnactv');
          sidenav.classList.remove('active');
          overlay.classList.remove('bgover');
        }
    }
    
    togglek.onclick = function(){
        togglek.classList.toggle('btnactv');
        sidenav.classList.toggle('active');
        overlay.classList.toggle('bgover');
    }

/*Overlay*/
#overlay {
    position: fixed;
    height: 100vh;
    top: 0;
    background: #000;
    z-index: 999;
    transition: 0.3s;
}

#overlay.bgover {
  left: 0px;
  width: 100%;
  background: #000000d1;
}

/*Toggle Button*/
#togglek {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-end;
    font-size: 18px;
    margin: 10px;
    padding: 10px;
    position: absolute;
    top: 10px;
    right: 20px;
    border: 1px solid black;
    
}

#togglek::before {
    font-family: fontAwesome;
    content:'Open';
    color: #000;
}

#togglek.btnactv::before {
    font-family: fontAwesome;
    content:'Close';
    color: #000;
    z-index:1000;
}

/*Sidebar*/
.sidenav_box {
    margin-top: 5%;
    padding: 25px;
}

#sidenav {
    position: fixed;
    top: 0;
    left:-100%;
    width: 80%;
    height: 100vh;
    background: #fbfbfb;
    transition: 0.3s;
    z-index: 1000;
}

#sidenav.active {
    left: 0px;
    width: 80%;
    background: #fbfbfb;
    box-shadow: 5px 0px 15px 0px #00000021;
}

/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
}

/*Menu header info*/
.display.name {
   font-size: 15px;
   font-weight: 500;
   color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Text Link css*/
.user_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: #75777d;
}

.user_menu.item:hover > a {
    color: #2e323a;
}

<button id="togglek"/>

<div id="sidenav">
 <div > 
 
    <div >
        <span >Hello User</span>
        <span >[email protected]</span>
    </div>   

     <hr >  
     
    <div >
        <a href="/account">
         <i ></i>
         <span >Dashboard</span>
        </a>
    </div>
    
     <div >
        <a href="ordini">
         <i ></i>
         <span >I miei ordini</span>
        </a>
    </div>
    
    <div >
        <a href="libreria">
         <i ></i>
         <span >Downloads</span>
        </a>
    </div>
    
    <div >
        <a href="impostazioni">
         <i ></i>
         <span >Impostazioni</span>
        </a>
    </div>
    
    <div >
        <a href="wp-login.php?action=logout">
         <i ></i>
         <span >Logout</span>
        </a>
    </div>
    
  </div>
</div>

<div id="overlay"></div>

CodePudding user response：

is this what u mean?

  const togglek = document.getElementById('togglek');
    const sidenav = document.getElementById('sidenav');
    
    document.onclick = function(e){
        if(e.target.id !== 'sidenav' && e.target.id !== 'togglek' ) {
          togglek.classList.remove('btnactv');
          sidenav.classList.remove('active');
          overlay.classList.remove('bgover');
        }
    }
    
    
    function pressToShow() {
        togglek.classList.toggle('btnactv');
        sidenav.classList.toggle('active');
        overlay.classList.toggle('bgover');
    }

/*Overlay*/
#overlay {
    position: fixed;
    height: 100vh;
    top: 0;
    background: #000;
    z-index: 999;
    transition: 0.3s;
}

#overlay.bgover {
  left: 0px;
  width: 100%;
  background: #000000d1;
}

/*Toggle Button*/
#togglek {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-end;
    font-size: 18px;
    margin: 10px;
    padding: 10px;
    position: absolute;
    top: 10px;
    right: 20px;
    border: 1px solid black;
    
}


/*Sidebar*/
.sidenav_box {
    margin-top: 5%;
    padding: 25px;
}

#sidenav {
    position: fixed;
    top: 0;
    left:-100%;
    width: 80%;
    height: 100vh;
    background: #fbfbfb;
    transition: 0.3s;
    z-index: 1000;
}

#sidenav.active {
    left: 0px;
    width: 80%;
    background: #fbfbfb;
    box-shadow: 5px 0px 15px 0px #00000021;
}

/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
}

/*Menu header info*/
.display.name {
   font-size: 15px;
   font-weight: 500;
   color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Text Link css*/
.user_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: #75777d;
}

.user_menu.item:hover > a {
    color: #2e323a;
}

<button id="togglek" onclick=pressToShow()>PRESS TO SHOW</div>

<div id="sidenav">
 <div > 
 
    <div >
        <span >Hello User</span>
        <span >[email protected]</span>
    </div>   

     <hr >  
     
    <div >
        <a href="/account">
         <i ></i>
         <span >Dashboard</span>
        </a>
    </div>
    
     <div >
        <a href="ordini">
         <i ></i>
         <span >I miei ordini</span>
        </a>
    </div>
    
    <div >
        <a href="libreria">
         <i ></i>
         <span >Downloads</span>
        </a>
    </div>
    
    <div >
        <a href="impostazioni">
         <i ></i>
         <span >Impostazioni</span>
        </a>
    </div>
    
    <div >
        <a href="wp-login.php?action=logout">
         <i ></i>
         <span >Logout</span>
        </a>
    </div>
    
  </div>
</div>

<div id="overlay"></div>

CodePudding user response：

Seems to be working for me. Here's the jsfiddle

In the html I just changed

<div id="togglek"></div>

<button id="togglek" onclick="MyFunction()"></button>

And in the js:

togglek.onclick = function(){
    togglek.classList.toggle('btnactv');
    sidenav.classList.toggle('active');
    overlay.classList.toggle('bgover');
}

function MyFunction() {
    togglek.classList.toggle('btnactv');
    sidenav.classList.toggle('active');
    overlay.classList.toggle('bgover');
}