title: dynamically increasing height of div in javascript
body: <p>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..</p>
  
  <h1>HTML</h1>
  
  <pre><code>      &lt;div id="controls"&gt;
           &lt;input type="button" onclick="incHeight()" id="btn" name="btn"&gt;
        &lt;/div&gt;
        &lt;div id="container" style="min-height:250px;"&gt; &amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>The below script works properly</p>
  
  <h1>Javascript</h1>
  
  <pre><code>      &lt;script type="text/javascript"&gt;
          function incHeight()
          {
            document.getElementById("container").style.height = 250+'px';
  
          }
        &lt;/script&gt;
  </code></pre>
  
  <p>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...</p>
  
  <pre><code>      &lt;script type="text/javascript"&gt;
          function incHeight()
          {
            document.getElementById("container").style.height += 250;     
          }
        &lt;/script&gt;
  </code></pre>
  
  <p>The problem is how do I get the '250' portion of the height value neglecting the 'px' in javascript..</p>