Javascript Drop Down Menu not working

Question

I am trying to make a drop down menu with Javascript (no JQuery). In my HTML, I have an unordered list that contains two list items, each containing an anchor and an unordered list with more list items inside.

I am not concerned about the menus looking pretty, just that the Javascript works. Right now, I am trying to get it to set up event listeners through a while loop so that when the top level list items are moused over, the class of the lower list itemsnwill change from one in which the CSS is set to display:none; to a class that has display:block; to make them appear.

I only have two tabs here, but that is because I shortened it from a list of ten tabs. I also don't care about any further submenus.

JS Fiddle: https://jsfiddle.net/xL5pukd5/

HTML:

<header>
  <!-- <ul>   <li><a></a><ul>   <li><a></a></li>   -->
  <!-- dd-menu dd-menu-tab dd-menu-tab-anchor dd-submenu dd-submenu-tab dd-submenu-tab-anchor -->
  <nav id="dd-menu-container">
    <ul id="dd-menu">
      <li class="dd-menu-tab">
        <a href="link1.htm" class="dd-menu-tab-anchor" title="Link1">Link 1</a>
        <ul class="dd-submenu">
          <li class="dd-submenu-tab">
            <a href="#" class="dd-submenu-tab-anchor">SubLink1a</a></li>
          <li class="dd-submenu-tab">
            <a href="#" class="dd-submenu-tab-anchor">Sublink1b</a></li>
        </ul>
      </li>
      <li class="dd-menu-tab">
        <a href="link2.htm" class="dd-menu-tab-anchor" title="link2">Link2</a>
        <ul class="dd-submenu">
          <li class="dd-submenu-tab">
            <a href="#" class="dd-submenu-tab-anchor">Sublimn2a</a></li>
          <li class="dd-submenu-tab">
            <a href="#" class="dd-submenu-tab-anchor">Sublink2b</a></li>
          <li class="dd-submenu-tab">
            <a href="#" class="dd-submenu-tab-anchor">Sublink2c</a></li>
        </ul>
      </li>

  </nav>

</header>

JavaScript:

getTabs = function(elementClass) {
  var tabs = document.getElementsByClassName(elementClass);
  return tabs
};
getSubmenus = function(elementClass) {
  var submenus = document.getElemenetsByClassName(elementClass);
  return submenus;
};

window.onload = function {
  var tabs = getTabs("dd-menu-tab");
  var submenus = getSubmenus("dd-submenu");
  var tabNumber = tabs.length - 1;
  var currentTab = 0;
  while (currentTab <= tabNumber) {
    tabs[currentTab].onmouseover = function {
      submenus[currentTab].className = "dd-submenu-onmouseover"
    };
    tabs[currentTab].onmouseout = function {
      submenus[curenetTab].className = "dd-submenu"
    };
    currentTab += 1;
  }
};

CSS:

.dd-submenu {
  display: none;
}

.dd-submenu-onmouseover {
  display: block;
}

I've tried using other prewritten drop down menu methods, but I couldn't get them to work, so I tried to create my own. Thanks in advance to any help :)

Answer 1

There are multiple issues with your script, including typos are said in the comment and wrong use of a closure variable in a loop .

But you really don't need js to fix this, you can use the :hover css selector to do it like

 html, body { margin: 0; padding: 0; } nav { display: block; padding: 0px; margin: 0; top: 0; left: 0; width: 100%; background-color: beige; } .dd-menu-tab-anchor { display: inline-block; color: white; } .dd-menu { position: absolute; width: 100%; top: 0; left: 0; } .dd-menu-tab { float: left; padding-top: 10px; padding-bottom: 10px; padding-left: auto; padding-right: auto; width: 9%; text-align: center; } .dd-submenu { display: none; } .dd-menu-tab:hover .dd-submenu { display: block; } li { list-style-type: none; background-color: #3300FF; border: 2px; border-color: white; } a { text-align: center; } 

 <header> <!-- <ul> <li><a></a><ul> <li><a></a></li> --> <!-- dd-menu dd-menu-tab dd-menu-tab-anchor dd-submenu dd-submenu-tab dd-submenu-tab-anchor --> <nav id="dd-menu-container"> <ul id="dd-menu"> <li id="dd-menu-tab1" class="dd-menu-tab"> <a href="link1.htm" class="dd-menu-tab-anchor" title="Link1">Link 1</a> <ul id="dd-submenu1" class="dd-submenu"> <li id="dd-submenu1-tab1" class="dd-submenu-tab"> <a href="link2" id="dd-menu-tab-anchor" class="">SubLink1a</a> </li> <li id="dd-submenu1-tab2" class="dd-submenu-tab"> <a href="" id="" class="">Sublink1b</a> </li> </ul> </li> <li id="dd-menu-tab2" class="dd-menu-tab"> <a href="link2.htm" id="link2" class="dd-menu-tab-anchor" title="link2">Link2</a> <ul id="dd-submenu2" class="dd-submenu"> <li id="dd-submenu2-tab1" class="dd-submenu-tab"> <a href="#" id="#" class="dd-submenu-tab-anchor">Sublimn2a</a> </li> <li id="dd-submenu2-tab2" class="dd-submenu-tab"> <a href="#" id="#" class="dd-submenu-tab-anchor">Sublink2b</a> </li> <li id="dd-submenu2-tab3" class="dd-submenu-tab"> <a href="#" id="#" class="dd-submenu-tab-anchor">Sublink2c</a> </li> </ul> </li> </nav> </header> <div> <h1 id="site title">Website.com</h1> </div> <body> <p>First paragraph sample text</p> <p>Second paragraph sample text</p> <p>Third paragraph sample text</p> </body> <footer> <p> References </p> <!-- <script src="file.js" type="text/javascript"></script> --> </footer> </html> 

---

If you still want to continue using your logic

 getTabs = function(elementClass) { var tabs = document.getElementsByClassName(elementClass); console.log(tabs); return tabs }; getSubmenus = function(elementClass) { var submenus = document.getElementsByClassName(elementClass); console.log(submenus); return submenus; }; window.onload = function() { var tabs = getTabs("dd-menu-tab"); var submenus = getSubmenus("dd-submenu"); var tabNumber = tabs.length - 1; var currentTab = 0; [].forEach.call(tabs, function(el, idx) { var submenu = submenus[idx]; el.addEventListener('mouseenter', function() { submenu.className = "dd-submenu-onmouseover" }); el.addEventListener('mouseleave', function() { submenu.className = "dd-submenu" }); }) }; 

 html, body { margin: 0; padding: 0; } nav { display: block; padding: 0px; margin: 0; top: 0; left: 0; width: 100%; background-color: beige; } .dd-menu-tab-anchor { display: inline-block; color: white; } .dd-menu { position: absolute; width: 100%; top: 0; left: 0; } .dd-menu-tab { float: left; padding-top: 10px; padding-bottom: 10px; padding-left: auto; padding-right: auto; width: 9%; text-align: center; } .dd-submenu { display: none; } .dd-submenu-onmouseover { display: block; } li { list-style-type: none; background-color: #3300FF; border: 2px; border-color: white; } a { text-align: center; } 

 <header> <!-- <ul> <li><a></a><ul> <li><a></a></li> --> <!-- dd-menu dd-menu-tab dd-menu-tab-anchor dd-submenu dd-submenu-tab dd-submenu-tab-anchor --> <nav id="dd-menu-container"> <ul id="dd-menu"> <li id="dd-menu-tab1" class="dd-menu-tab"> <a href="link1.htm" class="dd-menu-tab-anchor" title="Link1">Link 1</a> <ul id="dd-submenu1" class="dd-submenu"> <li id="dd-submenu1-tab1" class="dd-submenu-tab"> <a href="link2" id="dd-menu-tab-anchor" class="">SubLink1a</a> </li> <li id="dd-submenu1-tab2" class="dd-submenu-tab"> <a href="" id="" class="">Sublink1b</a> </li> </ul> </li> <li id="dd-menu-tab2" class="dd-menu-tab"> <a href="link2.htm" id="link2" class="dd-menu-tab-anchor" title="link2">Link2</a> <ul id="dd-submenu2" class="dd-submenu"> <li id="dd-submenu2-tab1" class="dd-submenu-tab"> <a href="#" id="#" class="dd-submenu-tab-anchor">Sublimn2a</a> </li> <li id="dd-submenu2-tab2" class="dd-submenu-tab"> <a href="#" id="#" class="dd-submenu-tab-anchor">Sublink2b</a> </li> <li id="dd-submenu2-tab3" class="dd-submenu-tab"> <a href="#" id="#" class="dd-submenu-tab-anchor">Sublink2c</a> </li> </ul> </li> </nav> </header> <div> <h1 id="site title">Website.com</h1> </div> <body> <p>First paragraph sample text</p> <p>Second paragraph sample text</p> <p>Third paragraph sample text</p> </body> <footer> <p> References </p> </footer> 

Demo: Fiddle

Answer 2

 getTabs = function(elementClass) { var tabs = document.getElementsByClassName(elementClass); console.log(tabs); return tabs }; getSubmenus = function(elementClass) { var submenus = document.getElemenetsByClassName(elementClass); console.log(submenus); return submenus; }; window.onload = function { var tabs = getTabs("dd-menu-tab"); var submenus = getSubmenus("dd-submenu"); var tabNumber = tabs.length - 1; var currentTab = 0; while (currentTab <= tabNumber) { tabs[currentTab].onmouseover = function { submenus[currentTab].className = "dd-submenu-onmouseover" }; tabs[currentTab].onmouseout = function { submenus[curenetTab].className = "dd-submenu" }; currentTab += 1; } }; 

 html, body { margin: 0; padding: 0; } nav { display: block; padding: 0px; margin: 0; top: 0; left: 0; width: 100%; background-color: beige; } .dd-menu-tab-anchor { display: inline-block; color: white; } .dd-menu { position: absolute; width: 100%; top: 0; left: 0; } .dd-menu-tab { float: left; padding-top: 10px; padding-bottom: 10px; padding-left: auto; padding-right: auto; width: 9%; text-align: center; } .dd-submenu { display: none; } .dd-menu-tab:hover .dd-submenu { position:absolute; display: block; } li { list-style-type: none; background-color: #3300FF; border: 2px; border-color: white; } a { text-align: center; } 

 <header> <!-- <ul> <li><a></a><ul> <li><a></a></li> --> <!-- dd-menu dd-menu-tab dd-menu-tab-anchor dd-submenu dd-submenu-tab dd-submenu-tab-anchor --> <nav id="dd-menu-container"> <ul id="dd-menu"> <li id="dd-menu-tab1" class="dd-menu-tab"> <a href="link1.htm" class="dd-menu-tab-anchor" title="Link1">Link 1</a> <ul id="dd-submenu1" class="dd-submenu"> <li id="dd-submenu1-tab1" class="dd-submenu-tab"> <a href="link2" id="dd-menu-tab-anchor" class="">SubLink1a</a></li> <li id="dd-submenu1-tab2" class="dd-submenu-tab"> <a href="" id="" class="">Sublink1b</a></li> </ul> </li> <li id="dd-menu-tab2" class="dd-menu-tab"> <a href="link2.htm" id="link2" class="dd-menu-tab-anchor" title="link2">Link2</a> <ul id="dd-submenu2" class="dd-submenu"> <li id="dd-submenu2-tab1" class="dd-submenu-tab"> <a href="#" id="#" class="dd-submenu-tab-anchor">Sublimn2a</a></li> <li id="dd-submenu2-tab2" class="dd-submenu-tab"> <a href="#" id="#" class="dd-submenu-tab-anchor">Sublink2b</a></li> <li id="dd-submenu2-tab3" class="dd-submenu-tab"> <a href="#" id="#" class="dd-submenu-tab-anchor">Sublink2c</a></li> </ul> </li> </nav> </header> <div> <h1 id="site title">Website.com</h1> </div> <body> <p>First paragraph sample text</p> <p>Second paragraph sample text</p> <p>Third paragraph sample text</p> </body> <footer> <p> References </p> <!-- <script src="file.js" type="text/javascript"></script> --> </footer> </html>