1

I'm making a toggle sidebar where onClick of button showmenu funtion is not working. I'm trying to change the style of the sidenav from display:none to display:block but when I click the button nothing happens. I've tried with an alert and that works but not with the style. Please help me find out where is the problem?

function showmenu() {
   var sidenav = document.getElementById("sidenav");
   var overdiv = document.getElementById("overlay");
   if (sidenav.style.display == "none") {
      overdiv.style.display = "block";
      sidenav.style.display = "block";                                    
   } else if(sidenav.style.display =="block"){
      sidenav.style.display = "none";
      overdiv.style.display = "none";
   }
}
.sidenav {
    width: 70%;
    height: 85%;
    top: 8%;
    background-color:#ffffff;
    left:0;
    display: none;
    border: 3px solid #77777766;
    overflow-x: hidden;
    transition: 0.5s;
    position: fixed;
    z-index: 5;

}

.overlay{
  position: absolute; 
  margin-top: 13%;
  display: none;
  margin-bottom: 13%;
  width: 100%; 
  height: 100%;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
        <nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()"><label class="menu-txt">Debate</label><img class="icon" src="images/iconos/megafono.png" /></a>
                <a class="item" onclick="noDisponible()"><label class="menu-txt">Mensajes</label> <img class="icon" src="images/iconos/veterinario.png" /></a>
                <a class="item" onclick="noDisponible()"><label class="menu-txt">Control de Salud</label> <img class="icon" src="images/iconos/corazon.png" /></a>
                <a class="item" href='mapa.html' >Mapas</label> <img class="icon" src="images/iconos/mapas.png" /></a>
                <a class="item" onclick="noDisponible()"><label class="menu-txt">Servicios</label> <img class="icon" src="images/iconos/doctor (1).png" /></a>
                <a class="item" onclick="noDisponible()"><label class="menu-txt">Configuración</label> <img class="icon" src="images/iconos/rueda-dentada.png" /></a>
                <a class="item" id="logout" onclick="logout();"><label class="menu-txt">Cerrar Sesión</label> <img class="icon" src="images/iconos/exit.png" /></a>
</nav>
</header>

<div id="overlay" class="overlay" onclick="overlay()"></div>
    <div id="content">
</div>
natvare
  • 77
  • 1
  • 8
  • "is not working" is not a good problem description. Be specific. – trincot Dec 07 '19 at 21:02
  • Please be more specific , And this is also not a good practice to write the same onclick function many times. Instead you can put them in an array and then iterate it so that you will only have to write onclick just once. – Thanveer Shah Dec 07 '19 at 21:07

4 Answers4

2

Your function working. Only change this line. Add style on nav tag style="display: none" and set default display: none or block.

<button id="menu-div" onclick="showmenu()">click here</button>
<nav class="sidenav" style="display: none" id="sidenav">
BCM
  • 665
  • 5
  • 20
1

You need to remove the display:none from the CSS classes.

But really, you're taking the wrong approach here. Your CSS and JavaScript should be separated from your HTML.

See the comments inline below:

// Don't use inline HTML event atributes, like onclick.
// Do all your event/JavaScript work separately in JavaScript

// Get all the DOM references you'll use just once,
// not every time your functions run
var btnMenu = document.getElementById("menu-div");
var sideNav = document.getElementById("sidenav");
var overDiv = document.getElementById("overlay");

btnMenu.addEventListener("click", showMenu);
overDiv.addEventListener("click", overlay);

// Set up event handling on the sideNav and let all
// the events triggered from within it bubble up to it
sideNav.addEventListener("click", noDisponible);

function showMenu() {
  // Just toggle the usage of the pre-made hidden class
  sideNav.classList.toggle("hidden");
  overDiv.classList.toggle("hidden");
  console.log("function showMenu called");
}

function noDisponible(event){
  // Make sure it was the right type of sideNave item
  if(event.target.classList.contains("noDisponible")){
    // Do work here
    console.log("function noDisponible called");
  } else if(event.target.classList.contains("logout")){
    // Do logout here
    logout();
  }
}

function overlay(event){
  // Do work here
  console.log("function overlay called");
}

function logout(event){
  console.log("function logout called");
}
.hidden { display:none; }

.sidenav {
    width: 70%;
    height: 85%;
    top: 8%;
    background-color:#ffffff;
    left:0;
    border: 3px solid #77777766;
    overflow-x: hidden;
    transition: 0.5s;
    position: fixed;
    z-index: 5;

}

.overlay{
  position: absolute; 
  margin-top: 13%;
  margin-bottom: 13%;
  width: 100%; 
  height: 100%;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer;
}
<header>
  <button type="button" id="menu-div"></button>
  <nav class="sidenav hidden" id="sidenav">
    <a class="item noDisponible">
      <label class="menu-txt">Debate</label>
      <img class="icon" src="images/iconos/megafono.png">
    </a>
    <a class="item noDisponible">
      <label class="menu-txt">Mensajes</label> 
      <img class="icon" src="images/iconos/veterinario.png">
    </a>
    <a class="item noDisponible">
      <label class="menu-txt">Control de Salud</label> 
      <img class="icon" src="images/iconos/corazon.png">
    </a>
    <a class="item noDisponible" href='mapa.html'>
      <label class="menu-txt">Mapas</label> <!--You were missing the opening label tag here -->
      <img class="icon" src="images/iconos/mapas.png">
    </a>
    <a class="item noDisponible">
      <label class="menu-txt">Servicios</label> 
      <img class="icon" src="images/iconos/doctor (1).png">
    </a>
    <a class="item noDisponible">
      <label class="menu-txt">Configuración</label> 
      <img class="icon" src="images/iconos/rueda-dentada.png">
    </a>
    <a class="item logout" id="logout">
      <label class="menu-txt">Cerrar Sesión</label> 
      <img class="icon" src="images/iconos/exit.png">
    </a>
</nav>
</header>

<div id="overlay" class="overlay hidden">OVERLAY HERE</div>
<div id="content"></div>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
1

Set the style of sidenav programatically outside of the function:

let sidenav = document.getElementById("sidenav");
sidenav.style.display = "none";

function showmenu() {
  let overdiv = document.getElementById("overlay");
  if (sidenav.style.display == "none") {
    overdiv.style.display = "block";
    sidenav.style.display = "block";
  } else if (sidenav.style.display == "block") {

    sidenav.style.display = "none";
    overdiv.style.display = "none";
  }
}
.sidenav {
  width: 70%;
  height: 85%;
  top: 8%;
  background-color: #ffffff;
  left: 0;
  border: 3px solid #77777766;
  overflow-x: hidden;
  transition: 0.5s;
  position: fixed;
  z-index: 5;
}

.overlay {
  position: absolute;
  margin-top: 13%;
  display: none;
  margin-bottom: 13%;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  cursor: pointer;
}
<header>
  <button id="menu-div" onclick="showmenu()">Click</button>
  <nav class="sidenav" id="sidenav">
    <a class="item" onclick="noDisponible()">
      <label class="menu-txt">Debate</label>
      <img class="icon" src="images/iconos/megafono.png" /></a>
    <a class="item" onclick="noDisponible()">
      <label class="menu-txt">Mensajes</label>
      <img class="icon" src="images/iconos/veterinario.png" />
    </a>
    <a class="item" onclick="noDisponible()">
      <label class="menu-txt">Control de Salud</label>
      <img class="icon" src="images/iconos/corazon.png" />
    </a>
    <a class="item" href='mapa.html'>
      <label class="menu-txt">Mapas</label>
      <img class="icon" src="images/iconos/mapas.png" />
    </a>
    <a class="item" onclick="noDisponible()">
      <label class="menu-txt">Servicios</label>
      <img class="icon" src="images/iconos/doctor (1).png" />
    </a>
    <a class="item" onclick="noDisponible()">
      <label class="menu-txt">Configuración</label>
      <img class="icon" src="images/iconos/rueda-dentada.png" />
    </a>
    <a class="item" id="logout" onclick="logout();">
      <label class="menu-txt">Cerrar Sesión</label>
      <img class="icon" src="images/iconos/exit.png" />
    </a>
  </nav>
</header>

<div id="overlay" class="overlay" onclick="overlay()">Overlay</div>
<div id="content">Content</div>
symlink
  • 11,984
  • 7
  • 29
  • 50
1

You need to use window.getComputedStyle to get the css properties instead of element.style.

Element.style only gives the inline styles provided but window.getComputedStyle will give you the final styles provided to the element. element.style will give you the inline styles only and that's why to make it work, you need to add inline style display: none as suggested by @BCM.

You can read more here

function showmenu() {
   var sidenav = document.getElementById("sidenav");
   var overdiv = document.getElementById("overlay");
   if (window.getComputedStyle(sidenav).display == "none") {
      overdiv.style.display = "block";
      sidenav.style.display = "block";                                    
   } else if(window.getComputedStyle(sidenav).display =="block"){
      sidenav.style.display = "none";
      overdiv.style.display = "none";
   }
}
.sidenav {
    width: 70%;
    height: 85%;
    top: 8%;
    background-color:#ffffff;
    left:0;
    display: none;
    border: 3px solid #77777766;
    overflow-x: hidden;
    transition: 0.5s;
    position: fixed;
    z-index: 5;

}

.overlay{
  position: absolute; 
  margin-top: 13%;
  display: none;
  margin-bottom: 13%;
  width: 100%; 
  height: 100%;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
        <nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()"><label class="menu-txt">Debate</label><img class="icon" src="images/iconos/megafono.png" /></a>
                <a class="item" onclick="noDisponible()"><label class="menu-txt">Mensajes</label> <img class="icon" src="images/iconos/veterinario.png" /></a>
                <a class="item" onclick="noDisponible()"><label class="menu-txt">Control de Salud</label> <img class="icon" src="images/iconos/corazon.png" /></a>
                <a class="item" href='mapa.html' >Mapas</label> <img class="icon" src="images/iconos/mapas.png" /></a>
                <a class="item" onclick="noDisponible()"><label class="menu-txt">Servicios</label> <img class="icon" src="images/iconos/doctor (1).png" /></a>
                <a class="item" onclick="noDisponible()"><label class="menu-txt">Configuración</label> <img class="icon" src="images/iconos/rueda-dentada.png" /></a>
                <a class="item" id="logout" onclick="logout();"><label class="menu-txt">Cerrar Sesión</label> <img class="icon" src="images/iconos/exit.png" /></a>
</nav>
</header>

<div id="overlay" class="overlay" onclick="overlay()"></div>
    <div id="content">
</div>

Also, for writing this type of code, you should be following @Scott Marcus's approach. It is much better and cleaner.

Sunil Chaudhary
  • 4,481
  • 3
  • 22
  • 41