www.webdeveloper.com
Results 1 to 4 of 4

Thread: Why won't this work?

  1. #1
    Join Date
    Apr 2012
    Posts
    3

    Question Why won't this work?

    <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

  2. #2
    Join Date
    Nov 2010
    Posts
    1,084
    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

  3. #3
    Join Date
    Apr 2012
    Posts
    3
    how do i do set interval?
    window.setInterval("flip(thediv)",200);
    ??

  4. #4
    Join Date
    Nov 2010
    Posts
    1,084
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles