2 functions in javascript in same div

Question

2 functions in javascript in same div

Navigation

#1 by (1 votes)

0

I have divs in my code in html (they are 3 menu bars), when I click, it transforms (as if it were an animation) into an x, however, I want it when it changes and I click it function other than the first. An "openNav ()" in the first and a "closeNav ()" in the second, does anyone know a way? Using the "onClick="

  function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("t").onClick="closeNav()";

 }

 function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
 }

 function myFunction(x) {
  x.classList.toggle("change");
 }



      <div id="t" class="container1" onclick="openNav()">
        <div class="container1" onclick="myFunction(this)" >
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
      </div>
        </div>

javascript html

asked by anonymous 19.05.2016 / 20:01

1 answer

Help with image upload and preview with $ _SESSION or $ _COOKIE Render component after clicking button

score 1 · Accepted Answer

Can be easily solved by defining a global variable.

<script>
var open = true;

  function openNav() {
     document.getElementById("mySidenav").style.width = "250px";
     document.getElementById("main").style.marginLeft = "250px";
 }

 function closeNav() {
   document.getElementById("mySidenav").style.width = "0";
   document.getElementById("main").style.marginLeft = "0";
 }

 function myFunction(x) {
   x.classList.toggle("change");
   if(open){
     openNav();
     open = false;
   }else{
      closeNav();
      open = true;
   }
 }
</script>

Logic example: link