Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Why isnt this working?

    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!

    Code:
    <!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>

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I appreciate your advice, but I have no idea how to implement it.

  • #4
    New Coder
    Join Date
    Apr 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try this

    PHP Code:
    <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> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •