Why won't this work?

**cplusplusjs** · 04-07-2012 11:39 AM

<div style="height:100px;width:100px;background-color:red;"id="animate" onclick="flip"></div>
<script type="text/javascript">
var div=document.getElementById("animate");
function flip(div)
{
for (var i=200;i>0;i--)
{
div.style.idth-=1;
}
}
flip(div);
</script>
i want this to shrink and then ill add to it to grow with a different color

**xelawho** · 04-07-2012 11:55 AM

width (not idth) will give you a string value - in this case "100px". To use it as a number you have to strip out the px, turn it into a number, do your calculation then add the px again:

Code:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div style="height:100px;width:100px;background-color:red;"id="animate" onclick="flip(this)"></div>
<script type="text/javascript">
var thediv=document.getElementById("animate");

function flip(thediv){
for (var i=200;i>0;i--){
var wid=parseInt(thediv.style.width);
wid--;
thediv.style.width=wid+"px"
	}
}
flip(thediv);
</script>

</body>
</html>

note that your code runs faster than the eye can see... you may want to get rid of the loop and call the function from a setInterval to slow it down

**cplusplusjs** · 04-07-2012 12:04 PM

how do i do set interval?
window.setInterval("flip(thediv)",200);
??

**xelawho** · 04-07-2012 12:23 PM

people warn against passing a string to a setInterval like that. If you really need to pass the div to the function as an argument you can do this:

Code:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div style="height:100px;width:100px;background-color:red;"id="animate" onclick="flip(this)"></div>
<script type="text/javascript">
var thediv=document.getElementById("animate");

function flip(thediv){
var wid=parseInt(thediv.style.width);
if (wid==0){clearInterval(theint)}else{
wid--;
thediv.style.width=wid+"px"
	}
}
theint=setInterval(function(){flip(thediv)},200);
</script>

</body>
</html>

otherwise you could just do this:

Code:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div style="height:100px;width:100px;background-color:red;"id="animate" onclick="flip()"></div>
<script type="text/javascript">


function flip(thediv){
var thediv=document.getElementById("animate");
var wid=parseInt(thediv.style.width);
if (wid==0){clearInterval(theint)}else{
wid--;
thediv.style.width=wid+"px"
	}
}
theint=setInterval(flip,200);
</script>

</body>
</html>

Thread: Why won't this work?

Thread Tools

Display

Why won't this work?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions