SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Non-Member DelvarWorld's Avatar
    Join Date
    Jul 2004
    Location
    Baloney
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Instance problem - hits me in every language

    Let's say I'm looping through an array of objects and applying an onclick to all of them. Lets say I want to alert it's position in the array when clicked, so I do:

    for(var x = 0; x < arr.length; x++) {
    arr[x].onclick = function() { alert(x) }
    }
    Now the problem is that pesky x. If the array is 11 units long all of the objects will alert "11" when clicked because they all reference x I suppose, which ends at 11. I could do the whole script eval thing, but this has happened to me in a few other languages (ActionScript, mainly), which doesn't have a script parse method. Is there an easy / guru way to assign variables like this? It's gotten me into trouble before.
    Last edited by DelvarWorld; Sep 20, 2007 at 20:21. Reason: '

  2. #2
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i've had the exact same issue in actionscript....please help us =)
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  3. #3
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could always capture 'x' inside another variable:

    Code javascript:
    for (var x=0; x<arr.length; x++){
      var  y = x;
      arr[x].onclick=function(){alert(y);}
    }

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are providing a single function for all the elements, and replacing the value for x in that single, shared function. If you want a unique function, use the new Function constructor instead of a literal.


    for (var x= 0; x<arr.length; x++){
    arr[x].onclick= new Function('','alert('+x+')');
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or you can do the following, avoiding the overhead of eval-ing in the function construction:
    Code:
    for(x=0;x<arr.length;x++) {
      arr[x].onclick =  (function(i) {
        return function() { 
           alert(i);
        }
      })(x));
    }

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fun with closures

    Code:
    for(var x = 0; x < arr.length; x++) {
    	setOnClick(arr[x], x);
    }
    
    ...
    
    function setOnClick(obj,msg) {
    	obj.onclick = function () {
    		alert(msg);
    	}
    }


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
  •