SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2005
    Posts
    436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Loop assigning wrong parameters

    Code JavaScript:
        for(i=1;i<=64;i++){
            document.getElementById('b'+i).onclick = function(){alert(i);} 
        }

    For some reason when I click b1 through b64 it always alerts "65" instead of the expect 1-64 respectively.

    What am I missing?

    Thanks,
    Colin

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    It's probably because, once the function is actually called, it is looking at the current value for i, instead of the value from when you set it. The current value for i after the for loop is 65.

    Try converting the i to a string in the alert, so something like:
    alert(i+'');

    should do the trick.

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2005
    Posts
    436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response. It didn't work though

    Any other ideas?

    Thanks,
    e39m5

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2005
    Posts
    436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
            document.getElementById('b'+i).onclick = function(){ alert(this.id.split("b")[1]); }
            document.getElementById('b'+i).setAttribute('onclick', 'javascript:alert("' + i + '");');
    After asking around to a couple friends, I found 2 solutions. The second one is probably better.

    e39m5

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    The second solution that you have there is essentially the same solution that I mentioned.

  6. #6
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rather than setting up 64 separate functions that do the same thing, set just one, on a parent of all those 'b' elements. If they are all contained by a div, use that, otherwise:

    Code:
    document.body.onclick= function(e){
    	e= window.event? event.srcElement : e.target;
    	e= e.id || '';
    	if(/^b\d+$/.test(e)) alert(e.match(/\d+/));
    	return true;
    }
    Last edited by mrhoo; Feb 3, 2008 at 10:09.

  7. #7
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code javascript:
    for (var i = 1; i < 64; i++){
    	document.getElementById('b' + i).onclick = function(){
    		alert(this.id.substring(1));
    	};
    }

  8. #8
    SitePoint Evangelist
    Join Date
    Jun 2005
    Posts
    436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @sanamine

    I suppose but for some reason yours didn't work. I tried with single quotes or double quotes before, after, or before and after the i var.

    @mrhoo
    Unfortunately I need to change the onclick function frequently for specific elements. So b23 and b24 will have a different onclick then the rest so I do not believe your solution will work for my needs

    @Everyone
    The setAttribute method only works for the first time I assign it. Because I am changing the onclick functions constantly, I needed to use the this.id method to get it working.

    e39m5

  9. #9
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by e39m5 View Post
    Code JavaScript:
        for(i=1;i<=64;i++){
            document.getElementById('b'+i).onclick = function(){alert(i);} 
        }

    For some reason when I click b1 through b64 it always alerts "65" instead of the expect 1-64 respectively.
    You can do this:
    Code:
    document.getElementById('b'+i).onclick = new Function("alert("+i+");");
    Some purists will recommend a closure-based solution like this:
    Code:
    function enclose(v)
    {
     return function(){alert(v)}
    }
    
    for(var i=1;i<=64;i++)
     document.getElementById('b'+i).onclick = enclose(i);
    However if you're constantly re-assigning new handlers there could be memory issues.
    Tab-indentation is a crime against humanity.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    The way that I would recommend is to store the value on the element itself.

    Code Javascript:
    for (var i = 1; i < 64; i++){
        document.getElementById('b' + i).index = i;
        document.getElementById('b' + i).onclick = function(){
            alert(this.index);
        };
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •