SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member vilStewart's Avatar
    Join Date
    Jul 2005
    Location
    New Orleans, LA (Picayune, MS)
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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]);           }
        }
    }
    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


    ***
    Last edited by vilStewart; Jan 23, 2008 at 19:39.
    stewart::howe
    Web Developer & Programmer
    CelerMedia.Com | iAmStewart.com | CelerLabs.com

  2. #2
    SitePoint Zealot Shpook's Avatar
    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

  3. #3
    SitePoint Member vilStewart's Avatar
    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 =/
    stewart::howe
    Web Developer & Programmer
    CelerMedia.Com | iAmStewart.com | CelerLabs.com

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    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:
    Code:
    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.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •