Javascript undefined variable error [duplicate]

Question

Possible Duplicate:
Event handlers inside a Javascript loop - need a closure?

I want to simply assign onclick events to a series of li elements within an unordered list. Instead of doing it the messy way by either defining lots of unique IDs and manually adding the events to each li element I'd like to do it programatically with a for loop.

html:

<ul id="homeNav">
    <li><a title="Back to home page" href="">home</a></li>
    <li><a title="Play" href="">play</a></li>
    <li><a title="About the site?" href="">about</a></li>
    <li><a title="Latest development news and info." href="">dev blog</a></li>
    <div class="clear"></div>
</ul>

Javascript:

window.onload = function()
{
    var parentList = document.getElementById('homeNav');
    var listItems = parentList.getElementsByTagName('li');
    var numItems = listItems.length;
    for(var i = 0; i < numItems; i++)
    {
        listItems[i].onmouseover = function()
        {
            listItems[i].getElementsByTagName('a')[0].style.color = 'blue';
        }
        listItems[i].onmouseout = function()
        {
            listItems[i].getElementsByTagName('a')[0].style.color = '#cccccc';
        }
    }
}

I get the error listItems[i] is undefined

To me it looks like the event is literally looking for the i index variable instead of using the number assigned to it at the time of the event being added to the trigger, or maybe the i variable isn't within the closures' scope?

I'd rather not use jQuery. I'd like to be comfortably proficient with Javascript before I dabble in JS libraries and frameworks. — Lee
– Lee, Commented Sep 25, 2012 at 19:05

Rajat Singhal · Accepted Answer · 2012-09-25 19:08:08Z

4

The variable is not avilable in the event, you can use this..

for(var i = 0; i < numItems; i++)
{
    listItems[i].onmouseover = function()
    {
        this.getElementsByTagName('a')[0].style.color = 'blue';
    }
    listItems[i].onmouseout = function()
    {
        this.getElementsByTagName('a')[0].style.color = '#cccccc';
    }
}

answered Sep 25, 2012 at 19:08

Rajat Singhal

11.3k5 gold badges40 silver badges57 bronze badges

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

1 Comment

Lee Over a year ago

Excellent. Thank you. Works perfectly. I would have expected the JS interpreter to associate it with the this equivalent.

Elmor · Accepted Answer · 2012-09-25 19:08:33Z

0

I'm not sure, but i would think & check

var listItems = parentList.getElementsByTagName('li');
listItems[i]

... I'm not sure that you're doing it 2) do a console.log (listItems) to see what's it, and remember about array - object difference. that's all for now, have to go... sorry for the brief answer, hope it helps.

answered Sep 25, 2012 at 19:08

Elmor

4,9157 gold badges41 silver badges71 bronze badges

Comments

Anoop · Accepted Answer · 2012-09-25 19:08:42Z

0

there is problem in your code. on mouseover or mouseout value of i would be equal to numItems; as these events will get called after finish of for loop. so you should save context.

function bindEvent(elem){

            elem.onmouseover = function()
            {
               elem.getElementsByTagName('a')[0].style.color = 'blue';
            }
            elem.onmouseout = function()
            {
               elem.getElementsByTagName('a')[0].style.color = '#cccccc';
            }
}

    window.onload = function()
    {
        var parentList = document.getElementById('homeNav');
        var listItems = parentList.getElementsByTagName('li');
        var numItems = listItems.length;
        for(var i = 0; i < numItems; i++)
        {
          bindEvent(listItems[i]);

        }
    }

answered Sep 25, 2012 at 19:08

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

2 Comments

Lee Over a year ago

Are you sure? It works exactly as intended with a simple change from listItems[i] to this

Anoop Over a year ago

using this is better. but if you want to save index of item then above will help you. both answers are correct.

Collectives™ on Stack Overflow

Javascript undefined variable error [duplicate]

3 Answers 3

1 Comment

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Linked

Related