JavaScript - переменная не определена

Question

Я пытаюсь выяснить, что случилось с этим кодом:

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

HTML, выглядит следующим образом:

<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> 

И все-таки Chrome говорит мне: неперехваченным ReferenceError : dropDownNav не определен onclick

Может ли кто-нибудь показать мне дорогу?

---

Спасибо большое за все быстрые ответы! Первый раз, используя stackoverflow, определенно не последний. Он, наконец, работал, я добавил индекс [0] для массива и удалил dropDownNav для функции onClick. Единственная проблема: я бы хотел, чтобы на дисплее dropDownNav не возвращался, когда я нажимаю на второй раз. Любая подсказка?

Answer 1

document.getElementsByClassName() возвращает HTMLCollection (аналогично массиву) всех элементов, соответствующих имени класса. Свойство style не определено для HTMLCollection, но для Элемент. Получить первый элемент из массива с помощью

var dropDownNav = document.getElementsByClassName("dropDownNav")[0];