Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #21711

I don't want to have if for each index in the loop

Show all headers | View raw

I have two functions InitThumbnails and ShowBigImage shown below. I want to 
create event handlers for each element when I loop through the thumbnailsArr 
by using only one statement like this
element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[i]); }, false);

In the present code in function InitThumbnails  I have this solution
 if (i == 0)
           element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[0]); }, false);
       else if(i==1)
           element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[1]); }, false);
       else if(i==2)
           element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[2]); }, false);
       else if(i==3)
           element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[3]); }, false);
       else if(i==4)
           element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[4]); }, false);

it works but it's not a nice code and I want to have only one statement like 
I said earlier in this way
element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[i]); }, false);

The problem is that when I test this and use this statement
element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[i]); }, false);
and put a breakpoint on function ShowBigImage the passed parameter image is 
undefined.

I think I need to use something called closure but I don't know how to write 
?

function InitThumbnails(thumbnailsArr)
{
   for (var i = 0; i < thumbnailsArr.length; i++)
   {
       var element = document.getElementById("fig" + i);
       element.setAttribute("src", "img/" + thumbnailsArr[i]);
       element.setAttribute("alt", thumbnailsArr[i].split(".")[0]);
       document.getElementById("desc" + i).innerHTML = 
thumbnailsArr[i].split(".")[0];

       if (i == 0)
           element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[0]); }, false);
       else if(i==1)
           element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[1]); }, false);
       else if(i==2)
           element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[2]); }, false);
       else if(i==3)
           element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[3]); }, false);
       else if(i==4)
           element.addEventListener("click", function () { 
ShowBigImage(thumbnailsArr[4]); }, false);
   }
}

function ShowBigImage(image)
{
    var element = document.getElementById("bigimage");
    element.setAttribute("src", "img/" + image);
    element.setAttribute("alt", image.split(".")[0]);
}

//Tony 

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

I don't want to have if for each index in the loop "Tony Johansson" <johansson.andersson@telia.com> - 2013-10-24 01:47 +0200
  Re: I don't want to have if for each index in the loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2013-10-24 02:44 +0100
    Re: I don't want to have if for each index in the loop "Tony Johansson" <johansson.andersson@telia.com> - 2013-10-24 09:16 +0200
      Re: I don't want to have if for each index in the loop Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-10-24 12:17 +0200
        Re: I don't want to have if for each index in the loop dhtml <dhtmlkitchen@gmail.com> - 2013-10-25 14:52 -0700
          Re: I don't want to have if for each index in the loop Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-10-26 00:38 +0200

csiph-web