...

View Full Version : Why isnt this working?



Landshark
02-02-2007, 03:30 AM
Can someone please help me figure out what is going wrong here? ?
I know the function is running before the form variables are pulled, but I have no idea how to fix it....I dont have very much hair left to pull out!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>Follow the Bouncing Ball!</title>
<script LANGUAGE="javascript1.2">
<!--

var myBall = document.getElementById("ball");
var loc = 200;
var direction = 0;
var time = document.form1.input_A.value;
var dis = document.form1.input_B.value;

setInterval("startt()", time);


function startt()
{

if(0 == direction)
{
/* move down */
loc += dis;

if(loc >= 600)
{
/* reached lower limit, change direction */
direction = 1;
}
}
else
{
/* move up */
loc -= dis;

if(loc < dis)
{
/* reached upper limit, change direction */
direction = 0;
}
}

myBall.style.top = loc;
}

</script>
</head>
<BODY>

<img id="ball" style="position: absolute; left:400px; top:100px; width:100; height:100;" src="ball.png" alt="">

<form name="form1">
Timer Interval <input type="text" name="input_A" />
Step Size <input type="text" name="input_B" />
<input name="btn" type="button" value="Go" onclick="startt()"/>
<input name="stop" type="button" value="Stop" onclick="window.location=window.location"/>
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>

brandonH
02-02-2007, 04:08 AM
to possible solutions for you. one is to take your entire script and move it ourt of the head and after the </body> tag. or you can make the script a function so that its not running before the page loads. then using the <body onload="yourFunction()"> you can call to it as soon as the pages loads.


as of right now the script runs as soon as the page starts to load, which means the variables that refer to elements in the document wont be valid, becase you are setting the variables before the elements actually exsist. that will always cause errors

Landshark
02-02-2007, 02:45 PM
I appreciate your advice, but I have no idea how to implement it.

gorilla
02-02-2007, 03:12 PM
You should wait until the whole thing loads.
So don't set the interval when the page is not loaded yet.
So either you put the
setInterval("startt()", time);
to the end of the page, or you do leave it where it is and write:
window.onload=function(){setInterval(startt, time)}

By the way writing "startt()" is slower and more complicated method than simply writing startt here.

Mr J
02-02-2007, 03:23 PM
Try this


<html>
<head>
<title>Follow the Bouncing Ball!</title>

<script type="text/javascript">
<!--

loc = 200;
direction = 0;
timer=null

function startt(){
currentPos=document.getElementById("ball").style.top
time = document.form1.input_A.value;
dis = Number(document.form1.input_B.value)
startt2()
}

function startt2(){

if(direction==0){ /* move down */
loc += dis;

if(loc >= 600){ /* reached lower limit, change direction */
direction = 1;
}

}
else{
loc -= dis; /* move up */

if(loc < dis){ /* reached upper limit, change direction */
direction = 0;
}

}

timer=setTimeout("startt2()",time)

document.getElementById("ball").style.top = loc;
}

function oreset(){
clearTimeout(timer)
document.getElementById('ball').style.top=currentPos
}

</script>
</head>
<BODY>

<img id="ball" style="position: absolute; left:400px; top:200px; width:100; height:100;" src="ball.png" alt="">

<form name="form1">
Timer Interval <input type="text" name="input_A" />
Step Size <input type="text" name="input_B" />
<input name="btn" type="button" value="Go" onclick="startt()"/>
<input name="stop" type="button" value="Stop" onclick="clearTimeout(timer)"/>
<input type="reset" name="reset" value="Reset" onclick="oreset()" />
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum