SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Jan 23, 2008, 19:46 #1
- Join Date
- Jul 2005
- Location
- New Orleans, LA (Picayune, MS)
- Posts
- 13
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
For loop inside onload(); Adding events not working. :S
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:
Code: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]); } } }
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
***Last edited by vilStewart; Jan 23, 2008 at 20:39.
-
Jan 23, 2008, 20:25 #2
- Join Date
- May 2007
- Location
- Hollywood, FL, USA
- Posts
- 129
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
Code JavaScript:(i=0; i<projects.length; i++)
to this:
Code JavaScript:(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!Life would be so much easier if we
could just look at the source code.
-Dave Olson
-
Jan 23, 2008, 20:37 #3
- Join Date
- Jul 2005
- Location
- New Orleans, LA (Picayune, MS)
- Posts
- 13
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 =/
-
Jan 23, 2008, 23:53 #4
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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.
Code Javascript: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.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Jan 24, 2008, 03:26 #5
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Almost.
The problem is the use of closures, like this:
Code:proj.onmouseover = function() { projectOn(projData[0]); }
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.Birnam wood is come to Dunsinane
Bookmarks