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未定义onclick

有人可以指路吗？

---

非常感谢所有快速解答!第一次使用stackoverflow,绝对不是最后一次.它终于工作了,我为数组添加了索引[0],并在onClick函数上删除了dropDownNav.唯一的问题是,当我第二次点击时,我希望dropDownNav显示回到无.任何线索？

Answer 1

document.getElementsByClassName()返回与类名匹配的所有元素的HTMLCollection(类似于数组).样式属性未针对HTMLCollection定义,而是针对Element定义.使用从数组中获取第一个元素

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