CODEWITHSUNDEEP
javascriptjquery
Lanti
Lanti

Reputation: 2339

Looping through getElementsByClassName

I have this Jquery code which is toggling mobile navigation, which is in two divs (left and right side of the logo, but logo is hidden):

$(document).ready(function() {
  $('.menu').on('click', function(e){
    $('.main-nav').toggleClass('active');
    e.preventDefault();
  });
});

I try to rewrite this to vannila js by this:

document.addEventListener('DOMContentLoaded', function() {
  var toggleNav = document.getElementsByClassName('main-nav');

  function myFunction() {
    for (var i=0; i<toggleNav.length; i++) {
      toggleNav[i].classList.toggle('active');
      console.log('myFunction() fired...');
      return false;
    }
  };

  var x = document.getElementsByClassName('menu')[0];
  x.addEventListener('click', myFunction);
});

But this is just only toggling the first nav in the loop, which is left-nav, like if I used var toggleNav = document.getElementsByClassName('main-nav')[0]; in the past. What went wrong?

HTML code:

<div class="toggle-mobile-nav">
  <a href="#" class="menu">Menu <span>≡</span></a>
</div>

<div class="navigation">

  <nav class="main-nav left-nav">
    ...
  </nav>

  <div class="logo logo-nav">
    <a href="/"><img class="logo-svg" src="..." alt="" /></a>
  </div>

  <nav class="main-nav right-nav">
    ...
  </nav>

</div>

Upvotes: 0

Views: 1119

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

You are returning false inside for loop, that will act like sort of a break,

function myFunction() {
    for (var i=0; i<toggleNav.length; i++) {
      toggleNav[i].classList.toggle('active');
      console.log('myFunction() fired...');
    }
  return false;
};

You have to return false in your function. That too after for loop's execution.

Upvotes: 3

Related Questions