'addEventListener' only onclick

Question

I'm using 'addEventListener' to open a menu (genres-container) only after a transition on another menu (mobile-nav) is done. The problem is, once everything is closed and I try to reactivate mobile-nav, 'addEventListener' seems to fire even if I didn't click on genres-container. What I want is everything to start over when I close mobile-nav.

function menu() {

  var y = document.getElementById('genres-container');
  var x = document.getElementById('mobile-nav');

  // If genres-container is open, close it.
  if (y.className === 'nav-active') {
    y.className = 'nav-disabled';
    x.className = 'nav-disabled';
  }

  // Else, open or close mobile-nav.
  else {
    if (x.className === 'nav-disabled') {
      x.className = 'nav-active';
    } else {
      x.className = 'nav-disabled';
    }
  }
}

function genres() {

  var x = document.getElementById('mobile-nav');
  var y = document.getElementById('genres-container');

  // If mobile-nav is open, close it.
  if (x.className === 'nav-active') {
    x.className = 'nav-disabled';

    //Wait for transition to be over.
    let element = document.getElementById("mobile-nav");
    element.addEventListener("transitionend", function(event) {

      // If genres-container is closed, open it.
      if (y.className === 'nav-disabled') {
        y.className = 'nav-active';
      }

      // Else, close it.
      else {
        y.className = 'nav-disabled';
      }
    }, false);
  }
}

.nav-disabled {
  max-height: 0;
  overflow: hidden;
}

.nav-active {
  max-height: 150px;
  overflow: hidden
}

#mobile-nav {
  transition: max-height ease .4s;
}

#genres-container {
  transition: max-height ease .4s;
}

<a class="nav-link" onclick="menu()">menu</a>
<div id="mobile-nav" class="nav-disabled">
  <a class="nav-link" onclick="genres()">genres</a>
</div>
<div id="genres-container" class="nav-disabled">
  genres menu
</div>

If you add an event listener (A) inside an event listener (B), you're going to add another copy of A each time event B fires. Which means after a second click on genres, the code in the event listener function runs twice. Then thrice, and so on. — , Jul 16 '18 at 15:11

Unmitigated · Accepted Answer · 2018-07-16T15:51:10.693

You need to move the eventListener for transitionend outside of the onClick function. Otherwise, the event listener will be added multiple times.

 var x = document.getElementById('mobile-nav');
  var y = document.getElementById('genres-container');
 var isMenuTransition = false;
function menu() {
   isMenuTransition = true;


  // If genres-container is open, close it.
  if (y.className === 'nav-active') {
    y.className = 'nav-disabled';
    x.className = 'nav-disabled';
  }

  // Else, open or close mobile-nav.
  else {
    if (x.className === 'nav-disabled') {
      x.className = 'nav-active';
    } else {
      x.className = 'nav-disabled';
    }
  }
}
let element = document.getElementById("mobile-nav");
    element.addEventListener("transitionend", function(event) {
      if(!isMenuTransition){
      // If genres-container is closed, open it.
      if (y.className === 'nav-disabled') {
        y.className = 'nav-active';
      }

      // Else, close it.
      else {
        y.className = 'nav-disabled';
      }
      } else {
        isMenuTransition = false;
      }
    }, false);

function genres() {

 

  // If mobile-nav is open, close it.
  if (x.className === 'nav-active') {
    x.className = 'nav-disabled';

    //Wait for transition to be over.
    }
}

.nav-disabled {
  max-height: 0;
  overflow: hidden;
}

.nav-active {
  max-height: 150px;
  overflow: hidden
}

#mobile-nav {
  transition: max-height ease .4s;
}

#genres-container {
  transition: max-height ease .4s;
}

<a class="nav-link" onclick="menu()">menu</a>
<div id="mobile-nav" class="nav-disabled">
  <a class="nav-link" onclick="genres()">genres</a>
</div>
<div id="genres-container" class="nav-disabled">
  genres menu
</div>

But if I do so, genres-container activates at the same time as mobile-nav, which is not what I what. What I want is genre-container to replace mobile-nav after the transition is over. That part seems to work with my present code. The problem is when I try to reopen mobile-nav after everything has been closed, genres-container opens as well, without having to click on genres. — Maxime Pigeon, Jul 16 '18 at 15:25

'addEventListener' only onclick

1 Answers1