CODEWITHSUNDEEP
javascript
Daniel Mashraki
Daniel Mashraki

Reputation: 262

Change div width every 1 second by 5px

I tried to change div width every 1 second by 5px using JavaScript. How can I make this work?

Here's my code:

   <html>
        <head>
             <title>JS Functions</title>
        </head>
        <body>
        	<div style="width:100px; height:100px; background:gray" id="box" onclick="bigger()"></div>
            <script>
    
    function bigger()
    {
        var w = 100
        var h = 100
        while(w < 1000, h < 1000)
        {
            w = w+5;
            h = h+5;
            document.getElementById('box').style.width = w
            document.getElementById('box').style.height = h
            setInterval();
        }
    }
            </script>
        </body>
    </html>

Upvotes: 0

Views: 5208

Answers (3)

Jeff
Jeff

Reputation: 4146

You need to use setInterval to call your code every second, so move it outside of the bigger() function. Also you need the full value for style, including the unit you're using.

try this

<html>
        <head>
             <title>JS Functions</title>
        </head>
        <body>
        	<div style="width:100px; height:100px; background:gray" id="box"></div>
            <script>
    
        var w = 100;
        var h = 100;
    function bigger()
    {
        if (w < 1000 && h < 1000) 
        {
            w = w+5;
            h = h+5;
            document.getElementById('box').style.width = w + 'px';
            document.getElementById('box').style.height = h + 'px';
            
        } else {
           clearInterval(int);
       }
    }
              var int = setInterval(bigger, 1000);
            </script>
        </body>
    </html>

Upvotes: 2

nicholaswmin
nicholaswmin

Reputation: 22959

Let's say you have a div wth id='boxToEnlarge'

The JSFiddle: http://jsfiddle.net/7qtb1u8e/1/

And this is the actual code:

function enlargeBox(){

 //get current size
 var currentWidth = document.getElementById('boxToEnlarge').offsetWidth;
 var currentHeight = document.getElementById('boxToEnlarge').offsetHeight;

 //add 5 more pixels to current size
 document.getElementById('boxToEnlarge').style.width = currentWidth + 5 +'px';
 document.getElementById('boxToEnlarge').style.height = currentHeight + 5 +'px';

}

//call the enlargeBox func every 1 sec (1000 milliseconds) 
setInterval(function(){enlargeBox()},1000);

We are reading the current size of the div we want to enlarge then we add 5px to that amount and apply it on it's width/height CSS properties.

We wrap the above in a function and using setInterval, we call that function once every n milliseconds, in this case 1000ms which equals 1 second

Upvotes: 0

j08691
j08691

Reputation: 207919

No while loop needed. You can just use setInterval:

var w = 100;
var h = 100;
var foo = setInterval(function () {
    if(w>1000) cancelInterval(foo)
    w = w + 5;
    h = h + 5;
    document.getElementById('box').style.width = w + 'px';
    document.getElementById('box').style.height = h + 'px';
}, 1000);
<div style="width:100px; height:100px; background:gray" id="box" onclick="bigger()"></div>

Upvotes: 6

Related Questions