Declaring multiple functions in a for loop

Question

I am creating an image gallery with thumbnails similar to this one http://coolcarousels.frebsite.nl/c/28/. I have it working correctly but I am looking to shorten my javascript code using a for loop as I will be working with 25 pictures.

I have the following extracts from my HTML code:

<!-- thumbnail images -->
<img src="thumbs/Taj Mahal_thumb.jpg" onclick="changeImage0()">
<img src="thumbs/India01_thumb.jpg" onclick="changeImage1()">
<img src="thumbs/India02_thumb.jpg" onclick="changeImage2()">
<img src="thumbs/India03_thumb.jpg" onclick="changeImage3()">
<img src="thumbs/India04_thumb.jpg" onclick="changeImage4()">
<img src="thumbs/India05_thumb.jpg" onclick="changeImage5()">

and from my javascript code:

var imgNumber = 0;
var NumberOfImages = 6-1; //-1 because array members starts from 0

//Images 
var img = new Array(NumberOfImages);

img[0] = "images/Taj Mahal.jpg";
img[1] = "images/India01.jpg"; 
img[2] = "images/India02.jpg"; 
img[3] = "images/India03.jpg"; 
img[4] = "images/India04.jpg";
img[5] = "images/India05.jpg";

//Captions   
var imgcap = new Array(NumberOfImages);

imgcap[0] = "Taj Mahal, Agra";
imgcap[1] = "Driving through Delhi";
imgcap[2] = "India Gate, Delhi";
imgcap[3] = "Lotus Temple, Delhi";
imgcap[4] = "Monkeys fighting in the streets of Delhi!"; 
imgcap[5] = "Old Delhi";

function changeImage0()
{
    x=document.getElementById('myimage')
    imgNumber=0;
    x.src=img[imgNumber];
    x=document.getElementById("cap");
    x.innerHTML=imgcap[imgNumber];
}
function changeImage1()
{
    x=document.getElementById('myimage')
    imgNumber=1;
    x.src=img[imgNumber];
    x=document.getElementById("cap");
    x.innerHTML=imgcap[imgNumber];
}
function changeImage2()
{
    x=document.getElementById('myimage')
    imgNumber=2;
    x.src=img[imgNumber];
    x=document.getElementById("cap");
    x.innerHTML=imgcap[imgNumber];
}
function changeImage3()
{
    x=document.getElementById('myimage')
    imgNumber=3;
    x.src=img[imgNumber];
    x=document.getElementById("cap");
    x.innerHTML=imgcap[imgNumber];
}
function changeImage4()
{
    x=document.getElementById('myimage')
    imgNumber=4;
    x.src=img[imgNumber];
    x=document.getElementById("cap");
    x.innerHTML=imgcap[imgNumber];
}
function changeImage5()
{
    x=document.getElementById('myimage')
    imgNumber=5;
    x.src=img[imgNumber];
    x=document.getElementById("cap");
    x.innerHTML=imgcap[imgNumber];
}

As you can see I wish to declare 6 different functions with 6 different names, but as they all perform similar roles I want to perform this declaration using a for loop as such

for(var d=0;d<=NumberOfImages;d++)
{
    function changeImage(d)
    {
        x=document.getElementById('myimage');
        imgNumber=d
        x.src=img[imgNumber];
        x=document.getElementById("cap");
        x.innerHTML=imgcap[imgNumber];
    }
}

But unfortunately I cannot get this to work. I have a feeling I might be declaring the functions incorrectly using "function changeImage(d)". Is this wrong? Any ideas on how to create this loop that will create my functions: changeImage0, changeImage1, changeImage2, ... Thanks in advance!

Your NumberOfImages should be 6 not 6-1. Array indices (index es) start at 0, however if you need 6 of them you still need 6 of them, not 5. Just when you go to access the array it starts at 0 instead of 1 and ends at 5 instead of 6. — Graeme
– Graeme, Commented Jan 3, 2014 at 23:18
just fyi, for loops don't have their own scope. you are declaring changeImage once, which is processed at parse time, and doing an empty loop at run time. — lincolnk
– lincolnk, Commented Jan 3, 2014 at 23:25
I need the 6-1 array for a different part of the code that I did not include here but thanks anyways!! — oliveirano25
– oliveirano25, Commented Jan 4, 2014 at 0:13

p.s.w.g · Accepted Answer · 2014-01-03 23:14:30Z

6

No, you don't have to declare multiple functions. One would be fine:

function changeImage(d)
{
    x = document.getElementById('myimage');
    imgNumber = d;
    x.src = img[imgNumber];
    x = document.getElementById("cap");
    x.innerHTML = imgcap[imgNumber];
}

Or even better:

function changeImage(d)
{
    document.getElementById('myimage').src = img[d];
    document.getElementById("cap").innerHTML = imgcap[d];
}

And use it like this:

<img src="thumbs/Taj Mahal_thumb.jpg" onclick="changeImage(0)">
<img src="thumbs/India01_thumb.jpg" onclick="changeImage(1)">
<img src="thumbs/India02_thumb.jpg" onclick="changeImage(2)">
<img src="thumbs/India03_thumb.jpg" onclick="changeImage(3)">
<img src="thumbs/India04_thumb.jpg" onclick="changeImage(4)">

answered Jan 3, 2014 at 23:14

p.s.w.g

150k31 gold badges307 silver badges339 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Henry Blyth · Accepted Answer · 2014-01-03 23:16:46Z

1

Remove the for loop, declare function changeImage(d) {} just once, and pass d in your onclick handlers.

answered Jan 3, 2014 at 23:16

Henry Blyth

1,7701 gold badge15 silver badges26 bronze badges

Collectives™ on Stack Overflow

Declaring multiple functions in a for loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related