title: Changing HTML elements through JS doesn't update immediately
body: <p>On my website I have quite large 3d model files that need to be loaded and I want to show the user how many 3d objects are already loaded. I created two variables, that get incremented when an object is requested or loaded successfully. Printing this out on console works, but I want to change two HTML outputs I created like this:</p>
  <pre><code>Loaded objects: &lt;output id=&quot;loaded&quot;&gt;&lt;/output&gt;
  Requested objects: &lt;output id=&quot;requested&quot;&gt;&lt;/output&gt; 
  </code></pre>
  <p>to show the current status. To update the numbers I use these commands:</p>
  <pre><code>function updateLoadNumbers() {
      document.getElementById(&quot;loaded&quot;).value = loadedObjects;
      document.getElementById(&quot;requested&quot;).value = requestedObjects;
  }
  </code></pre>
  <p>I call this function, when a new object has been created and I call it when an object has been successfully processed. The latter happens at the end of an callback that was started by an <code>XMLHttpRequest</code>.</p>
  <p>This is a shortened version of the code:</p>
  <pre><code>function loadFileAsText(filename, callback) {
    var req = new XMLHttpRequest();
    //setting up the request
  
    req.onload = function() {
      if(req.status &gt;= 200 &amp;&amp; req.status &lt; 300 || req.status == 0)
        callback(req.responseText);
    };
  }
  
  
  //Part of the function to process a file
  loadFileAsText(filename, (result) =&gt; {
      /*
      All the processing
      */
  
      loadedObjects++;
      updateLoadNumbers();
  }
  </code></pre>
  <p><strong>But the text only updated when the loading is done</strong>, when it is useless. How can I get the HTML to update faster?</p>