JavaScript-未定义变量

我正在试图找出此代码的错误：

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告诉我： 未捕获引用错误：未定义dropDownNav onclick

谁能给我指路吗

---

---

非常感谢所有的快速回答！第一次使用stackoverflow，绝对不是最后一次。最后，我为数组添加了索引[0]，并删除了onClick函数中的dropDownNav。唯一的问题是，当我第二次单击鼠标时，我希望dropDownNav显示返回到无。任何线索？

document.getElementsByCassName（）返回与类名匹配的所有元素的HTMLCollection（类似于数组）。style属性不是为HTMLCollection定义的，而是为元素定义的。使用从数组中获取第一个元素

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

---

getElementsByCassName（）返回与类名匹配的所有元素的HTMLCollection（类似于数组）。style属性不是为HTMLCollection定义的，而是为元素定义的。使用从数组中获取第一个元素

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

---

使用

dropDownNav[0]尝试。style.display

为什么要将未定义的

dropDownNav

传递到

toggle_visibility

？您还必须移动

var dropDownNav=document.getElementsByClassName（“dropDownNav”）

在函数外部。@TheBreiflab-为什么他必须将它移到函数外部？别介意，事实上，我看到他在onclick属性中使用了

dropDownNav

作为参数，除非它在函数外部，否则该属性是未定义的。但是我可以看到他没有在函数中使用它。用

dropDownNav[0]试试。style.display

为什么要将未定义的

dropDownNav

传递到

toggle\u visibility

？您还必须移动

var dropDownNav=document.getElementsByClassName（“dropDownNav”）

在函数外部。@TheBreiflab-为什么他必须将它移到函数外部？别介意，事实上，我看到他在onclick属性中使用了

dropDownNav

作为参数，除非它在函数外部，否则该属性是未定义的。但是我可以看到他没有在函数中使用它。