JavaScript - variable not defined

Question

I am trying to figure out what was wrong with this 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 like 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 is not defined onclick

Could anybody show me the way?

Thanks alot for all the quick answers! First time using stackoverflow, definitely not the last. It finally worked, I added the index[0] for the array, and removed dropDownNav on the onClick function. The only problem is, I would like the dropDownNav display to go back to none when I click on the a second time. Any clue?

Why do you pass undefined dropDownNav to toggle_visibility? — VisioN
– VisioN, Commented May 6, 2013 at 11:03
You also have to move var dropDownNav = document.getElementsByClassName("dropDownNav"); outside the function. — thebreiflabb
– thebreiflabb, Commented May 6, 2013 at 11:04
@thebreiflabb - why does he have to move it outside the function? — Tomer
– Tomer, Commented May 6, 2013 at 11:05
Never mind that actually, I saw he used dropDownNav as an argument in the onclick attribute, which would be undefined unless it was outside the function. But I can see he is not using it inside the function. — thebreiflabb
– thebreiflabb, Commented May 6, 2013 at 11:09

c.P.u1 · Accepted Answer · 2013-05-06 11:11:20Z

5

document.getElementsByClassName() returns an HTMLCollection(similar to an array) of all elements matching the class name. The style property is not defined for HTMLCollection but for Element. Get the first element from the array using

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

edited May 6, 2013 at 11:11

answered May 6, 2013 at 11:05

c.P.u1

17.1k6 gold badges48 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript - variable not defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related