JavaScript Forum

**Physicsguy** · 07-03-2010, 10:28 AM

HTML Code:

<script type="text/javascript">
function grow() {
  var i=document.getElementById('growBox');
  j = parseFloat(i.getAttribute('height'));
  i.setAttribute('style','height:'+j+'px;background:blue;color:white;position:absolute;');
  i.innerHTML=j;
  j++;
}
setInterval("grow()", 10);
</script>
<div id="growBox" onclick="grow()" height="100" style="background:red;position:absolute;height:100px;">Hello there</div>

I'm wondering why that code isn't working

, what it should do is make the blue (or red) box grow at 1px per 10-somethings. It does change to blue, but it fails to grow?

Any ideas? Thanks

-PG

**stbuchok** · 07-05-2010, 08:21 AM

the j variable is being incremented at the end but at the beginning is being overridden, making it so that it is always 100. Here's some code that works.

<html>

<head>

<script type="text/javascript">

var j = 100;

function grow() {

var div = document.getElementById("growBox");

div.style.backgroundColor = '#0000FF';

j = parseFloat(div.offsetHeight);

j++;

div.style.height = j;

div.innerHTML = j;
}

setInterval("grow()", 10);
</script>

</head>

<body>

<div id="growBox" style="background-color: #FF0000; position: absolute; height: 100px; color: #FFFFFF">Hello there</div>

</body>
</html>

**Physicsguy** · 07-05-2010, 08:35 AM

Thanks! It works like a dream!!

One question, is there an easy way to make it stop and reverse?

Like after it hits a height of 200, stop growing, and then when somebody clicks on it (the blue div), go back to 0?

**stbuchok** · 07-05-2010, 08:44 AM

Something like this?

<html>

<head>

<script type="text/javascript">

var j = 100;

function grow() {

var div = document.getElementById("growBox");

div.style.backgroundColor = '#0000FF';

j = parseFloat(div.offsetHeight);

j++;

div.style.height = j;

div.innerHTML = j;

if(j < 200){

setTimeout('grow()', 10);
}
else
{
setTimeout('shrink()', 10);
}
}

function shrink() {

var div = document.getElementById("growBox");

div.style.backgroundColor = '#0000FF';

j = parseFloat(div.offsetHeight);

j--;

div.style.height = j;

div.innerHTML = j;

if(j > 100){

setTimeout('shrink()', 10);
}
else
{
setTimeout('grow()', 10);
}
}

</script>

</head>

<body onload="grow();">

<div id="growBox" style="background-color: #FF0000; position: absolute; height: 100px; color: #FFFFFF">Hello there</div>

</body>
</html>

**Physicsguy** · 07-06-2010, 10:15 AM

Yes! Thank you