For loop inside onload(); Adding events not working. :S

[vilStewart]

Let me explain first....

on www.celermedia.com I have some projects listed and I am doing some js magic for each project. So I am attempting to just go through them all with a for loop and add their appropriate events (mouseover,out,click)...

Here is what currently am trying to do:

window.onload = function() {
    
    var projects = new Array();
        projects[0] = 'Tbr,http://www.theboardroomsurfandskate.com/';
        projects[1] = 'Gcs,http://www.gulfcoastshop.com/';
        projects[2] = 'Mts,http://www.mytutorialsite.com/';
        projects[3] = 'Mcp,http://www.mycustomportal.com/';
        projects[4] = 'Stew,http://stewart.celermedia.com/';

    for (i=0; i<projects.length; i++) {
        var projData = projects[i].split(',');
        var proj = document.getElementById('proj'+projData[0]);
            proj.onmouseover = function() { projectOn(projData[0]); }
            proj.onmouseout  = function() { projectOff(projData[0]); }
            proj.onclick    = function() { go(projData[1]);           }
    }
}

What I don't get is on the line...
var projData = projects[i].split(',');

If I change my 'i' variable to 0,1,2, etc... it works fine, for that ONE.. why would that work but not when I put in my i variable from my for loop ?


Thanks in advance !

***
Edit::

Well.. i noticed that the LAST element is the one that is actually being highlighted and working, so I need to try making an array of proj's ? to add events to ? not sure :S


***

[Shpook]

I'm pretty new to Javascript, but it might be because the incrementer variable "i" isn't being declared within the for loop. Try changing this:

(i=0; i<projects.length; i++)

to this:

(var i=0; i<projects.length; i++)

That's my best guess based on what I've learned so far. If that doesn't do the trick, then I'm sure someone else here can help. Good luck to you!

[vilStewart]

Negatory, I can still alert(i); and get every single one of my values....

As well as alert(projData[0]); and [1] ... work. They alert each value for each one, just like it should. But for some reason the actually assigning of the events is not working =/

[paul_wilkins]

I suspect that it's because the projData array is created locally inside the function, so that by the time the function gets run as an event, the projData array is not accessible anymore.

There are some other problems in the code you gave. The function names for the mouse events don't match up with the other function names, so I've used the names of functions I suspect you were intending to use, mouseon() and mouseoff()

I suggest that you store the data as properties on the elements themself with proj.url, then access those properties when it comes time to run them. This way you the event registration needs just the function name, and the function itself can get the properties required with, for example, this.url

There's also a tidier way to handle the data, as an array of objects, which also makes the code easier to read and understand when you come back to it several months later.

window.onload = function() {
    var projects = [
		{code: 'Tbr', url: 'http://www.theboardroomsurfandskate.com/'},
        {code: 'Gcs', url: 'http://www.gulfcoastshop.com/'},
        {code: 'Mts', url: 'http://www.mytutorialsite.com/'},
        {code: 'Mcp', url: 'http://www.mycustomportal.com/'},
        {code: 'Stew', url: 'http://stewart.celermedia.com/'}
	];
 
    for (i=0; i<projects.length; i++) {
		var projData = projects[i];
        var proj = document.getElementById('proj'+projData.code);
		proj.code = projData.code;
		proj.url = projData.url;
		proj.onmouseover = mouseon;
		proj.onmouseout  = mouseoff;
		proj.onclick = go;
    }
}

The go function doesn't need any arguments to be passed to it now. The function can use this.url to get the value that's stored on the element itself, and likewise with the mouseover and out functions, they can use this.code to easily obtain the correct value for that object.

[AutisticCuckoo]

I suspect that it's because the projData array is created locally inside the function, so that by the time the function gets run as an event, the projData array is not accessible anymore.

Almost.

The problem is the use of closures, like this:

proj.onmouseover = function() { projectOn(projData[0]); }

IIRC, when an anonymous function references a variable in the scope of the surrounding function, it's not the current value at that precise moment that is stored, but a reference to the variable itself.

So projData is still accessible, but it will have the last value assigned to it.

Since you are assigning projData values in a loop, every event handler will reference the last value assigned to projData (in this case ["Stew", "http://stewart.celermedia.com/"]).

The method pmw57 suggested should work.