WEB Javascript onClick for dynamic objects..

Discussion in 'OT Technology' started by fishbulb, Sep 2, 2009.

  1. fishbulb

    fishbulb Active Member

    Joined:
    Oct 29, 2001
    Messages:
    6,848
    Likes Received:
    4
    Location:
    md
    This is a problem that I've never been smart enough to solve:

    I'm using a for loop to create an dynamic amount of Image objects lets say.

    Code:
    for( var color in colorOptions[material_id]){
    
      var eIMG1 = document.createElement("img");
      eIMG1.setAttribute("src","/"+swatchImgs[color]);          
      eIMG1.setAttribute("alt",colorOptions[material_id][color]+" sample");   
      eIMG1.setAttribute("width","22");              
      eIMG1.setAttribute("height","22");
      eIMG1.setAttribute("id","swatch_"+color);        
      eIMG1.onclick = function() { 
        
        clickSwatch(color);
        return false;
      
      }
    
      document.getElementById("colorSwatches").appendChild(eIMG1);
    
    }
    
    I've always read that something like the below won't work in IE, or at least IE 6, and in my testing it didn't work:
    Code:
    eIMG1.onclick = 'clickSwatch(color)';
    
    So the eIMG1.onclick = function() { ... bit is what I picked up several places online as being the correct way to go about it.

    My problem is, each object created in the loop ends up with the same onClick action. Meaning even though the for loop is giving a different value for "color" each time, the argument for the color variable that is sent to clickSwatch is always the last value for color in the overall for loop. Which makes sense because it's reassigning the eIMG1.onclick values to each image I create.

    So my question is, is there a way to dynamically create the img variables in the for loop, so that the onclick function call is unqiue for each as it should be?

    I tried creating an array of img objects first, and accessing each object in the array and assigning proper values and onclick, but the same issue occurs which doesn't make sense to me.

    I also tried creating dynamic variable names using something like
    window["eIMG"+looper] instead of eIMG1, but that didn't work either.

    So for output, what I'm aiming for is something like
    Code:
    <img src="asd.jpg" onClick="clickSwatch(1);">
    <img src="XYZ.jpg" onClick="clickSwatch(2);">
    <img src="tuyyyy.jpg" onClick="clickSwatch(3);">
    
    and I get this
    Code:
    <img src="asd.jpg" onClick="clickSwatch(3);">
    <img src="XYZ.jpg" onClick="clickSwatch(3);">
    <img src="tuyyyy.jpg" onClick="clickSwatch(3);">
    
    Anyone know a way to fix this?
     
    Last edited: Sep 3, 2009
  2. fishbulb

    fishbulb Active Member

    Joined:
    Oct 29, 2001
    Messages:
    6,848
    Likes Received:
    4
    Location:
    md
    hah thanks, but thats not the specific output I'm seeking, just an example to show that the onclick segement giving the same argument each time while the src, alt, etc are dynamic as they should be.
     
  3. noon

    noon get high and teach me how to listen

    Joined:
    May 4, 2002
    Messages:
    3,384
    Likes Received:
    0
    Location:
    Lawrence, KS
    Try creating a generic function that sits outside the loop, and then pass the object to the function, ie swatchcolor(this) or swatchcolor(eIMG)
     
  4. noon

    noon get high and teach me how to listen

    Joined:
    May 4, 2002
    Messages:
    3,384
    Likes Received:
    0
    Location:
    Lawrence, KS
    its not really clear what youre trying to accomplish.. can you post the code for clickSwatch? What is the expected input for that function?
     
  5. fishbulb

    fishbulb Active Member

    Joined:
    Oct 29, 2001
    Messages:
    6,848
    Likes Received:
    4
    Location:
    md
    Think of a page that list all colors of a shirt available, I'm dynamically listing color swatches that are available and making each color swatch clickable so that the user can click the color swatch to choose that color ( the same they would choose a color in a drop down menu. )


    Right now the clickSwatch function looks like this just to test:
    Code:
    function clickSwatch(color){
    
        
        alert(color);
        
      
     }
    
    The output is, all of the swatches draw correctly, but they all get the onclick value of the last swatch. I.e. if it drew Blue, Red, Yellow swatches, the alert would say Yellow for all three swatches.
     
  6. Kevin

    Kevin New Member

    Joined:
    Aug 27, 2002
    Messages:
    87,634
    Likes Received:
    0
    Location:
    Michigan
    Barnes & Noble: Pro Javascript Techniques.

    Highly recommend it for anyone that knows javascript, and wants to master it.
     
  7. fishbulb

    fishbulb Active Member

    Joined:
    Oct 29, 2001
    Messages:
    6,848
    Likes Received:
    4
    Location:
    md
    Thanks for the help everyone.
    eIMG1.onclick = new Function('clickSwatch(' + color + ')');
    made it work in IE6 et al.
     

Share This Page