I am having problems calling setTimeout with a function that has parameters

[Terry]

I thought that when you call setTimeout with a function that has
parameters that the parameter have to be enclose in + signs. I tried
that but it is unfortunately not working.

My code is as follows:

function animate(letter,element,p,z)
{
for (d=0; d < letter[z].length;d++)
{
//alert("is it working?");
element[p*6+(letter[d])].style.backgroundImage = "url(images/
greendot.gif)";
if (p > 0)
element[(p-1)*6+(letter[d])].style.backgroundImage =
"url(images/graydot.gif)";
}
}

function anim8or(letter)
{

for(b=0,z=7;b<8;b++,z--)
for (p= 0; p <= z; p++)
setTimeout('animate(' +letter,
document.getElementById('A').getElementsByTagName('div'),p,z+ ');',
50*p);

}

The url to the page is http://theamazing.onlinewebshop.net/newanimate.htm

The error message that I am getting is

Error: missing ) after argument list
Source File: http://theamazing.onlinewebshop.net/newanimate.htm
Line: 51, Column: 42
Source Code:
animate(2,1,3,0,4,0,1,2,3,4,0,4,0,4,0,4,0,4

I appreciate the help that I anticipate on receiving.

Thanks in advance,
Terry

 

[Lee]

Terry said:

I thought that when you call setTimeout with a function that has
parameters that the parameter have to be enclose in + signs.

setTimeout('animate(' +letter,
document.getElementById('A').getElementsByTagName('div'),p,z+ ');',
50*p);

That's a really interesting misinterpretation.

You don't enclose the arguments in + signs.
You use the concatenation operator (ie, the + sign) to construct
a string expression that can be eval'ed after the specified
time interval.

In the simplest case of a single argument whose value is a
number, that *looks* like you're enclosing the arguments in
+ signs. For example: setTimeout("alert(" + n + ")",100);


Since there's no way to represent the div argument as a string,
you're probably going to want to rewrite your animate function
so that all of its arguments are strings or numbers.


--

 

[Peter Michaux]

I thought that when you call setTimeout with a function that has
parameters that the parameter have to be enclose in + signs.

If you send a string as the first argument to setTimeout() you are
using the + signs as the operator to concatenate strings. For example,

var a = 'hi';
var b = 3;

setTimeout('foo("'+a+'",'+b+')', 100);

Note how the comma is quoted. Note also that when the string is
constructed that the first argument will be in double quotes --> "hi".

I tried
that but it is unfortunately not working.

My code is as follows:

function animate(letter,element,p,z)
{
for (d=0; d < letter[z].length;d++)
{
//alert("is it working?");
element[p*6+(letter[d])].style.backgroundImage = "url(images/
greendot.gif)";
if (p > 0)
element[(p-1)*6+(letter[d])].style.backgroundImage =
"url(images/graydot.gif)";
}

}

function anim8or(letter)
{

for(b=0,z=7;b<8;b++,z--)
for (p= 0; p <= z; p++)
setTimeout('animate(' +letter,
document.getElementById('A').getElementsByTagName('div'),p,z+ ');',
50*p);

This is not going to work for more than one reason. At the very
least...

The commas are a problem.

getElementsByTagName('div') returns an array which when converted to a
string will not be what you want. It will be something like the string
"[Object]". You want to pass the actual element.

Here is a little animation that implements the famous "yellow fade".
Perhaps you could use this as a starting point for your animation.
Note in this case the first argument to setTimeout is a function not a
string. Sending a function is often/usually better. The function f()
is called and then calls itself recursively until the blue is 255.

function yellowFade(el) {
var b = 155;
function f() {
el.style.background = 'rgb(255,255,'+ (b+=4) +')';
if (b < 255) {
setTimeout(f, 40);
}
};
f();
}

Good luck.

Peter

 

[Terry]

Terry said:




That's a really interesting misinterpretation.

You don't enclose the arguments in + signs.
You use the concatenation operator (ie, the + sign) to construct
a string expression that can be eval'ed after the specified
time interval.

In the simplest case of a single argument whose value is a
number, that *looks* like you're enclosing the arguments in
+ signs. For example: setTimeout("alert(" + n + ")",100);

Thanks for clearing that up for me. I will try to rewrite my animate
function.

Using your example if I wanted to alert two values would it be written
like
setTimeout("alert(" + n + ", " + m + ")",100);

Terry

 

[Thomas 'PointedEars' Lahn]

getElementsByTagName('div') returns an array

It should return a reference to a NodeList object. It would appear that in
Firefox 2.0.0.7 it returns a reference to an HTMLCollection object instead.

which when converted to a string will not be what you want. It will be
something like the string "[Object]".

It will be "[object]" (MSHTML) or "[object HTMLCollection]" (Gecko) in most
cases.


PointedEars

 

[Henry]

It should return a reference to a NodeList object. It would appear
that in Firefox 2.0.0.7 it returns a reference to an HTMLCollection
object instead.

<snip>

Strictly what should be returned is an object (any object)
implementing the NodeList interface. The (ECMAScript version of the)
NodeList interface has a - length - property and an - item - method,
and the HTMLCollection interface also has a - length - property and an
- item - method, so any object implementing the HTMLCollection
interface is also an object implementing the NodeList interface.

 

[dhtmlkitchen]

getElementsByTagName('div') returns an array which when converted to a
string will not be what you want. It will be something like the string
"[Object]". You want to pass the actual element.

It's actually a live NodeList, not an Array.

property access operator [ ] and the length property just makes it
look like one.