dynamically increasing height of div in javascript

html, javascript

Solution

Try this:

function incHeight() {
    var el = document.getElementById("container");
    var height = el.offsetHeight;
    var newHeight = height + 200;
    el.style.height = newHeight + 'px';
}

Fiddle

Problem

I want to increase the height of the div tag on click of button. Every time a user clicks a button it should increase the height of that particular div tag, say by 200px or so.. HTML ``` <div id="controls"> <input type="button" onclick="incHeight()" id="btn" name="btn"> </div> <div id="container" style="min-height:250px;"> &nbsp;</div> ``` The below script works properly Javascript ``` <script type="text/javascript"> function incHeight() { document.getElementById("container").style.height = 250+'px'; } </script> ``` But I want to do something like this, which is not working. The problem I think is the 'px' portion in the value. Anybody have any idea how to extract the INT portion of the value... ``` <script type="text/javascript"> function incHeight() { document.getElementById("container").style.height += 250; } </script> ``` The problem is how do I get the '250' portion of the height value neglecting the 'px' in javascript..

Original source