javascript - 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 は教えてくれます: Uncaught ReferenceError: dropDownNav is not defined onclick

誰か道を教えてくれませんか？

---

すべての迅速な回答に感謝します! 初めてスタックオーバーフローを使用しましたが、最後ではありません。最終的に機能し、配列に index[0] を追加し、onClick 関数の dropDownNav を削除しました。唯一の問題は、もう一度クリックしたときに dropDownNav の表示を何も表示しないようにしたいということです。どんな手掛かり？