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

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Terry - 26 Sep 2007 04:46 GMT

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

Reply to this Message

Lee - 26 Sep 2007 05:15 GMT

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.

--

Reply to this Message

Terry - 26 Sep 2007 05:25 GMT

> Terry said:
>
[quoted text clipped - 14 lines]
> 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

Reply to this Message

Peter Michaux - 26 Sep 2007 05:24 GMT

> 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.
[quoted text clipped - 23 lines]
> 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

Reply to this Message

Thomas 'PointedEars' Lahn - 26 Sep 2007 16:39 GMT

> 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

Signature

Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

Reply to this Message

Henry - 26 Sep 2007 16:50 GMT

> > 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.

<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.

Reply to this Message

dhtmlkitchen@gmail.com - 30 Sep 2007 22:03 GMT

> 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.

> Good luck.
>
> Peter

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / September 2007

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