JavaScript - variable not defined -

i trying figure out wrong code:

function toggle_visibility() {     var dropdownnav = document.getelementsbyclassname("dropdownnav");     if (dropdownnav.style.display == 'block') e.style.display = 'none';     else dropdownnav.style.display = 'block'; } 

the html goes this:

 <a class="dropdownnavbutton" href="#" onclick= "toggle_visibility(dropdownnav)"><img alt="menu icon" src= "img/navicon.png"></a>  <ul class="dropdownnav">     <li class="liworks">         <a href="works.html">works</a>     </li>      <li class="liabout">         <a href="#">about</a>     </li>      <li class="licontact">         <a href="contact.html">contact</a>     </li>      <li class="liblog">         <a href="#">blog</a>     </li> </ul> 

and yet chrome tells me: uncaught referenceerror: dropdownnav not defined onclick

could show me way?

---

thanks alot quick answers! first time using stackoverflow, not last. worked, added index[0] array, , removed dropdownnav on onclick function. problem is, dropdownnav display go none when click on second time. clue?

document.getelementsbyclassname() returns htmlcollection(similar array) of elements matching class name. style property not defined htmlcollection element. first element array using

var dropdownnav = document.getelementsbyclassname("dropdownnav")[0];