title: Increment Div using Javascript for making it work like a Progress Bar
body: <p>I am making use of div tag to make a custom Progress Bar instead of using HTML5 .  I have write some code which is not working perfectly. Here in the code i am trying to get width of inner div using javascript and parsing it into integer to get width in number format for running the first IF Condition but i am getting the width of inner div null so the first IF Condition will never be executed.
  The second IF Condition is simply to check progress is completed then clear the div width back to 0px and close the interval function.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      #outer{
          width:300px; 
          height:50px; 
          background:#000; 
          border:1px solid #000;
      }
      #inner{
          background-color: rgba(255,255,255,0.5);
          margin:2px;
          width:0px; 
          height:46px;
      }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
      var increaseWidth = 0;
      function getID(element){
          return document.getElementById(element);
      }
      function progressBarEvent(){
          var interval = setInterval(function(){
                  if(parseInt(getID('inner').style.width) &lt; 296) {
                      getID('inner').style.width = increaseWidth+"px";
                      increaseWidth++;
                  }
                  if(getID('inner').style.width) == "296px"){
                  getID('inner').style.width == "0px";
                  increaseWidth = 0;
                  clearInterval(interval);
                  }
              }
              ,5
          );
      }
  &lt;/script&gt;
  &lt;div id="outer"&gt;
      &lt;div id="inner"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button onclick="progressBarEvent()"&gt;Upload&lt;/button&gt;
  </code></pre>