Javascript : repeat function not work

Question

I wrote this function to fly DIV from top right to bottom left:

var myObj;

function infly() {
    myObj=document.getElementById('mydiv');
    myObj.style.right='0px';
    myObj.style.top='0px';
}

function flyer() {  
    var x=parseInt(myObj.style.right);
    var y=parseInt(myObj.style.top); 

    x+=1;
    y+=1;  

    myObj.style.right=x+'px';
    myObj.style.top=y+'px'; 

}

function repeat()
{
setTimeout(flyer,5000)
}

And HTML code is:

<body onLoad="infly()">

<div id="mydiv">
</div>

<a href="" onClick="javascript:repeat()">Fly</a>

...
..
.

But repeat function not work. When I remove this function in every click my DIV fly correctly.

I try with setInterval('fly();', 10); but no success.

Thanks for any helps.

Update:

I edit the code and correct repeat function but still not work.

gion_13 · Accepted Answer · 2011-12-28 09:10:19Z

3

use

setTimeout(fly,5000)

instead of

setTimeout("fly()","5000()")

answered Dec 28, 2011 at 9:10

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

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

Comments

mamoo · Accepted Answer · 2011-12-28 09:17:24Z

2

The second parameter of setTimeout should be a number:

setTimeout(fly,5000)

https://developer.mozilla.org/en/DOM/window.setTimeout

Updated, better not to use "fly()":

code in the alternate syntax, is a string of code you want to execute after delay milliseconds. (Using this syntax is not recommended for the same reasons as using eval())

edited Dec 28, 2011 at 9:17

answered Dec 28, 2011 at 9:10

mamoo

8,1762 gold badges31 silver badges38 bronze badges

3 Comments

Rob W Over a year ago

@WillemMulder That's another optimization. This answer offers an answer to the question, and includes a link to the relevant documentation. So +1.

Fabrizio Calderan Over a year ago

Never, never, never pass a string to a setTimeout/setInterval or the context will need to be EVALuated. it's definitely a bad practice

Willem Mulder Over a year ago

@RobW I did not disagree with mamoo's answer per se, but meant to improve on it. eval is evil.

Tom van der Woerdt · Accepted Answer · 2011-12-28 20:08:24Z

1

Here is code that makes the div fly. I styled it so you could see it. Your code only called flyer once, and without setting the position to absolute the div will not redisplay.

<script type="text/javascript">
  var K_CYCLES = 20;
  var numcycles = 0;

  function infly() {
    myObj = document.getElementById('mydiv');
    myObj.style.right = '0px';
    myObj.style.top = '0px';

  }

  function flyer() {  

    var x = parseInt(myObj.style.right);
    var y = parseInt(myObj.style.top); 

    x += 10;
    y += 10;  

    myObj.style.right = x + 'px';
    myObj.style.top = y + 'px';
    myObj.style.position = 'absolute';

    numcycles++;

    if (numcycles <= K_CYCLES)
    {
      setTimeout("flyer()",1000);
    }
  }

  function repeat()
  {
    flyer();
  }
</script>
</head>
<body onLoad="infly()">

<div id="mydiv" style="width:50px; height: 50px; border: 1px solid red;">
</div>

<input type="button" onClick="repeat()" value="fly"/>
</body>

edited Dec 28, 2011 at 20:08

Tom van der Woerdt

30k7 gold badges76 silver badges105 bronze badges

answered Dec 28, 2011 at 18:49

Eli

111 bronze badge

1 Comment

tamilsweet Over a year ago

Good work. But minor issue. Inside repeat function numcycles should be set to 0 so that the cycle repeats.

Leigh Ciechanowski · Accepted Answer · 2011-12-28 09:13:16Z

0

Change your repeat function to look like this

function repeat() { setTimeout("fly()",5000) }

answered Dec 28, 2011 at 9:13

Leigh Ciechanowski

1,33717 silver badges33 bronze badges

Comments

Onsemeliot · Accepted Answer · 2011-12-28 09:14:43Z

0

And if you want the function to constantly move without repeating the click you would need to call repeat(); at the end of fly() as well. (Of corse if that is, what you want to accomplish...)

answered Dec 28, 2011 at 9:14

Onsemeliot

54 bronze badges

Comments

yapingchen · Accepted Answer · 2011-12-29 01:27:47Z

0

<a href="javascript:void()" onclick="javascript:repeat()">Fly</a>

answered Dec 29, 2011 at 1:27

yapingchen

8665 silver badges5 bronze badges

Comments

Tom van der Woerdt · Accepted Answer · 2011-12-28 10:46:19Z

-2

<a href="javascript:void()" onclick="javascript:repeat()">Fly</a>
setTimeout("fly()",5000)

edited Dec 28, 2011 at 10:46

Tom van der Woerdt

30k7 gold badges76 silver badges105 bronze badges

answered Dec 28, 2011 at 9:20

yapingchen

8665 silver badges5 bronze badges

Collectives™ on Stack Overflow

Javascript : repeat function not work

7 Answers 7

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related