title: simple progress bar using JQuery does not work
body: <p>I'm a newbie in JavaScript, I'm responsible for an online quiz (html5 code), which takes long time to execute "startgame" function (construct the html for 100 questions).So I add a progress bar, </p>
  
  <pre><code>   function startgame()
     {    
      var progress=0;
      for (index = 0; index &lt; numberofquestions; index++) {
      progress=index+"%";
      $("#progress-bar").css("width",progress);
      ...
      }
      ...}
  </code></pre>
  
  <p>and progress-bar is the id of a div in the html code</p>
  
  <pre><code>&lt;div id="progress-bar" style="width:0%; background:blue;opacity:1;height:25px;"/&gt;`
  </code></pre>
  
  <p>which works as expected (the width of the bar is increasing) when I step over the for loop, however, it does not work at all if I remove the break point and run (the progress will stay at 0% or the point I stop debugging)
  I‘ve also tried </p>
  
  <pre><code>document.getElementById("progress-bar").outerHTML='&lt;div id="progress-bar"          style="width:'+progress+';background:blue;opacity:1; display:block; height:25px;"'+'/&gt;';
  </code></pre>
  
  <p>to replace
      $("#progress-bar").css("width",progress);
   but the result is same as before </p>