JavaScript Forum

**Physicsguy** · 04-08-2010, 07:28 PM

Hello, I'm having some trouble with yet another script. This time it's small though.

Code:

<input type="button" value="11" onclick="setTimeout(change('thabox','margin-left','1px'), 10)" />

But this doesn't work. All it does it call the function 'change' once, and never again. I want the box to move quickly to the left across the screen. What can I do?

I know this could be easily accomplished with 2 functions, but I'm wondering if you can just do it with one...

**tripy** · 04-08-2010, 08:14 PM

Because setTimeout is just to add a timer before the call of the function.
If you want the call to be repeated, look for setInterval()
http://docs.sun.com/source/816-6408-...ow.htm#1203669

Or...
make the change() function call itself, or add a new setTimeout() inside itself.
But setInterval() looks like what you need

**Physicsguy** · 08:50 PM

Hmm... setInterval does look like what I need, but it's not working...

Here's my entire page (without the new setStuff):

Code:

<script type="text/javascript">
function change(box,css,value) {
document.getElementById(box).style[css] = value;
}
</script>
<div id="thabox"><p>Tha Box!</p></div>
<input type="button" value="1" onclick="change('thabox','background','blue')" />
<input type="button" value="2" onclick="change('thabox','width','150px')" />
<input type="button" value="3" onclick="change('thabox','height','150px')" />
<input type="button" value="4" onclick="change('thabox','color','white')" />
<input type="button" value="5" onclick="change('thabox','padding','10px')" />
<input type="button" value="6" onclick="change('thabox','font-size','30px')" />
<input type="button" value="7" onclick="change('thabox','text-shadow','#ff0000 2px 2px 5px')" />
<input type="button" value="8" onclick="change('thabox','-webkit-border-radius','25px')" />
<input type="button" value="9" onclick="change('thabox','-moz-border-radius','25px')" />
<input type="button" value="10" onclick="change('thabox','font-family','Arial')" />
<input type="button" value="11" onclick="change('thabox','margin-left','200px');" />
<input type="button" value="12" onclick="change('thabox','background','blue')" />

**tripy** · 04-09-2010, 03:23 AM

you mean something like this?

HTML Code:

<html>
<body>
<script type="text/javascript">
function change(box,css,value) {
document.getElementById(box).style[css] = value;
}

//handler to cancelling the setInterval() calls
var moving=null;
//set the direction of the moving box. 0=right, 1=left
var direction=0;
//how many pixels should the box be moved on each itteration
var increment=10;

function moveIt(box){
    trg=document.getElementById(box);
    trg.style.position="absolute";
    cur=parseInt(trg.style['left'])
    if(isNaN(cur)){
        cur=0
    }
    
    //direction change?
    if(trg.offsetLeft+trg.offsetWidth>window.innerWidth){
        direction=1
    }
    
    if(direction==0){
        //first go right
        trg.style['left']=cur+increment+"px"
    }
    else{
        if(trg.offsetLeft>0){
            //then go left
            trg.style['left']=cur-increment+"px"
        }
        else{
            //and finally stop
            clearInterval(moving);
            trg.style.position="";
        }
    }
}
</script>
<div id="thabox"><p>Tha Box!</p></div>
<input type="button" value="Smurf it" onclick="change('thabox','background','blue')" />
<input type="button" value="Shrink it" onclick="change('thabox','width','150px')" />
<input type="button" value="Animate it" onclick="moving=setInterval('moveIt(\'thabox\')',10)" />
</body>
</html>