BouncingBall Coding problem, need urgent help.

ScienceFairAddict · Post by **ScienceFairAddict** » Fri Mar 01, 2013 5:40 am

Hello Science Buddies Forum.

I am currently working on my science fair project and decided that my experiment was going to be related to the bouncing ball animation experiment--
--Link: https://www.sciencebuddies.org/science- ... background

Now, I am already on the last step, which is trying to make the ball go up and down (the actual bouncing ball). My problem is that the red ball goes just down, never up and down, just down, and this is because i think my coding is wrong somewhere.
Here's my HTML layout:

<HTML>
________________________________________________________________________________________________________________________________________________

<HEAD><TITLE>ScienceFair</TITLE>


</HEAD>
<body>

<IMG ID="ball" STYLE="position: absolute; left: 200; top: 200; width: 10; height: 10;" SRC="ball1.gif">

<SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT>
My Page
</BODY>
</HTML>

____________________________________________________________________________________________________________________________________

I repeat, the problem is that the red ball is just going down, not up and down.
Thanks for your assistance.

vysarge · Post by **vysarge** » Sat Mar 02, 2013 5:31 am

Hello ScienceFairAddict,

I'm a little rusty on my HTML, but I'll try to help.

I read through your code quickly and noticed one typo-

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

It looks like you didn't actually specify an upper limit. If this was just a copying error, though, and you have an upper limit in your actual code, I can't see any other problems from a cursory read. In that case, I'd try putting some print statements in to see what functions and if statements the code is actually executing (I think these are supported in HTML) or switching the code around so that the ball goes up first. When in doubt, play around with your code a little!

Hope this helped, and good luck! If you have questions, feel free to ask.

ScienceFairAddict · Post by **ScienceFairAddict** » Sun Mar 03, 2013 5:27 pm

Thanks for your reply.
So, I think what you might have asked me to do, i changed the variable direction = 0 to variable direction = 1.

It still didn't do anything, the red ball is still not moving. Can you help me write the code, please. I really need your help.

hhemken · Post by **hhemken** » Tue Mar 05, 2013 4:58 pm

ScienceFairAddict,

vysarge's change of "if (loc <" to "if (loc < 0)" worked for me in Firefox. What browser are you using?

Heinz Hemken

hhemken · Post by **hhemken** » Tue Mar 05, 2013 5:05 pm

ScienceFairAddict,

Here is the corrected code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">

  <title>ScienceFair</title>
  <!-- saved from C:\Users\ELECTROSHOP\Desktop\Science Fair Project Idea -->
  <!-- When this code is saved as a local file, the preceding line tells Internet Explorer to treat this file according to the security rules for the Internet zone (plus any security rules specific for the Science Buddies website). -->
</head>

<body>
  <img id="ball" style=
  "position: absolute; left: 200; top: 200; width: 10; height: 10;"
  src="ball1.gif" name="ball">
  <script language="JavaScript1.2" type="text/javascript">
<!--
  var myBall = document.getElementById("ball");
  var loc = 200;

  setInterval ("myFunction()", 30);

  var direction = 0;
  function myFunction() {
    if(0 == direction) {
        /* move down */
        loc += 10;

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

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

    myBall.style.top = loc;
  }
  // >
  </script>
  My Page
</body>
</html>

All I did to your code was change to " if (loc < 0)" and reindented with html tidy (http://www.w3.org/People/Raggett/tidy/), which added the DOCTYPE heading, and a bit by hand.

Heinz Hemken

BouncingBall Coding problem, need urgent help.

BouncingBall Coding problem, need urgent help.

Re: BouncingBall Coding problem, need urgent help.

Re: BouncingBall Coding problem, need urgent help.

Re: BouncingBall Coding problem, need urgent help.

Re: BouncingBall Coding problem, need urgent help.