I noticed the quotes!
I have actually adopted a simpler (if a little cruder) method, whereby only the id is passed as an argument, and the Element is 'get'ed again by the function which receives it.
However, I think my original problem is an interesting lesson in any case, so here goes explaining it.
My problem is caused by me using a more complicated function, the problem lies higher up.
See if you can figure out what I am trying to do here:
I have a row of 6 images, which I want to apply a transition effect to. However, I don't want to start them all simultaneously, I want them to start slightly out of sync, behind one another, a mexican wave effect. The transition effect is handled by a function called splash, which takes a HTML image object (as attainable by d.getElementById("imgid")) as an argument.
My images have id's of grid1, grid2, grid3 etc. up to grid6
onload = function() {
d=document;
for(i=1;i<7;i++) {
//If I wanted to start all the images at once, I would have no problem, I would do this:
//splash(d.getElementById("grid"+i))
//However, I effect the transition by using a timeout, with the delay before it starts increasing in length as we go along, to give us a mexican wave effect
//Candidate one:
//setTimeout("splash(d.getElementById('grid'+i));",i*60);
//Now this doesn't work, as by the time the Timeout is executed, it looks up the value i has, and it isn't the value we wanted, as the for loop has changed it.
//The d.getElement obviously returns nothing useful, and the splash function has no image to do it's thing to.
//Candidate two:
//setTimeout("splash("+d.getElementById('grid'+i)+");",i*60);
//This seemed to me to be the most logical way of doing things... we get the element now, and plop it in as an argument to be used later. Surely the getElement... returns an object, so we can put this in?
//No, the Console says: "missing ] after argument list" - bugger.
//Candidate three we know wont work but we'll try all the same: lets try passing the object element as a string- we do this by adding quotes around it- either escaped doubles or singles... lets try both.
//setTimeout("splash('"+d.getElementById('grid'+i)+"');",i*60); //single quotes; this passes a string who's value is "[object HTMLImageElement]" - pretty, but pretty useless
//setTimeout("splash(\""+d.getElementById('grid'+i)+"\");",i*60); //escaped double quotes; this has the same effect
//Candidate four: we go back to the beginning, but instead of passing i as a variable, we get the value for i and slap it in the timeout...
setTimeout("splash(d.getElementById('grid'+"+i+"));",i*60);
//it works!
}//end of loop
}//end of onload function
I hope you get what I mean, I had fun working it out in any case!
Does anyone know about the overheads involved in a: constantly recalling d.getElementById
and b:
passing HTML objects as arguments;
and which is more economical?