CODEWITHSUNDEEP
javascriptmath
ehehhh
ehehhh

Reputation: 1074

JavaScript subtraction problem

I thought I'd write a simple script to animate my webpage a little.

The basic idea was to make a div grow bigger and smaller, when I push a button. I handled the growing part well, but I can't get it to shrink again.

It would seem, after long debugging, that the subtraction in JavaScript just isn't working. Basically, it seems, that this line isn't working: i = height - 4;, the value i stays the same.

I'm including a complete example, could you help me fix it?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Test</title>
        <meta http-equiv="Content-Language" content="Estonian" />
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
    </head>

    <body>
        <script type="text/javascript">
          var i;
          var increasing = new Boolean("true");
          var height;

          function testFunction() {
              height = parseInt(document.getElementById("testDiv").offsetHeight);
              if( increasing == true ) {
                  i = height + 4;
                  document.getElementById("testDiv").style.height = i + "px";
                  if( height >= 304 ) {
                      increasing = false;
                  }
                  else {
                      pause(30);
                  }
              }
              else {
                  i = height - 4;
                  document.getElementById("testDiv").style.height = i + "px";
                  if( height <= 104 ) {
                      increasing = true;
                  }
                  else {
                      pause(30);
                  }
              }
          }
          function pause(ms) {
              setTimeout("testFunction()", ms);
          } 
        </script>
        <button id="button" type="button" onclick="testFunction();">Do it!</button.
        <div id="testDiv" style="border: 2px solid black; width: 400px; height: 100px; text-align: center;">
           Hello!
        </div>
    </body>

</html>

EDIT: tags were producing HTML, had to change > to .

Upvotes: 0

Views: 574

Answers (6)

the Hampster
the Hampster

Reputation: 906

You can also combine the IF loop and ELSE loop. Use:
i = height + (increasing) ? 4 : -4;
and then later on: `if (height<105 || height>303) increasing = !increasing;'

This way if you change a parameter, such as rate, then you only need to change it once.
--Dave

Upvotes: 0

rahul
rahul

Reputation: 187050

I have changed your code and this works fine for me

Replace

height = parseInt(document.getElementById("testDiv").offsetHeight);

with

height = parseInt(document.getElementById("testDiv").style.height , 10);

and

if( height >= 304 ) {
                increasing = false;
        }

with

if( height >= 304 ) {
                increasing = false;
                pause(30);
        }

if( height <= 104 ) {
                increasing = true;
        }

with

if( height <= 104 ) {
                increasing = true;
                pause(30);
        }

Working Demo

Upvotes: 0

Soufiane Hassou
Soufiane Hassou

Reputation: 17750

Your problem is that when you do increasing=false; you don't call pause(30) again.

Just change your code like this :

if( height >= 304 ) { increasing = false; pause(30); }

this will work, I tested it :)

Edit: As stated by dlamblin, these kind of thing are easily done using JQuery, if your goal is the animation itself and not "how" it works, you should consider JQuery.

Upvotes: 1

richardtallent
richardtallent

Reputation: 35374

It appears from your code, that once the DIV reaches the maximum height, "increasing" is set to false, but you don't call pause() again, so testFunction() never actually fires with "increasing" set to false.

Upvotes: 1

nickf
nickf

Reputation: 546075

height = parseInt(document.getElementById("testDiv").offsetHeight);

This is probably not the problem, but you should always specify the base when using parseInt. It will interpret strings as base 8 if they start with 0

parseInt("011")     // 9
parseInt("011", 10) // 11

Upvotes: 1

dlamblin
dlamblin

Reputation: 45341

It honestly looks fine, but you'd get better milage out of learning to use jQuery to do this. (press run).

Upvotes: 0

Related Questions