title: inner html in javascript not working
body: <p>I have an audio file and a javascript for it.</p>
  
  <p>The javascript displays <strong>percentage</strong> of the audio buffered, if no buffered occurs it displays <strong>loading...</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function loop2() {
    var audio2 = document.getElementById("atwo1");
    var percentages = document.getElementsByClassName("atwo1l")
    var buffered = audio2.buffered;
    var loaded;
  
    if (buffered.length) {
      loaded = 100 * buffered.end(0) / audio2.duration;
      if (loaded.toFixed(2) != '0') {
        percentages[0].innerHTML = 'Loading: ' + loaded.toFixed(2) + '%';
      } else {
        percentages[0].innerHTML = 'Loading....';
      }
    }
  
    setTimeout(loop2, 50);
  }
  
  loop2();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;audio id="atwo1" controls="controls"&gt;
    &lt;source src="https://docs.google.com/uc?export=download&amp;id=19gLpR7J8TVHmooVbM23eK5Xq0f9YXNZf"&gt;
  &lt;/audio&gt;
  &lt;p&gt;&lt;span class="atwo1l"&gt;&lt;/span&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But for the above code, it does not displays <code>loading...</code></p>
  
  <p>When we place small audio file it will display. So why not for large files?</p>
  
  <p><strong>Update:</strong></p>
  
  <p><a href="https://stackoverflow.com/questions/47729073/inner-html-in-javascript-not-working#comment82418802_47729073">Found a partial answer</a> (<strong><a href="https://jsfiddle.net/6hco0wjh/11" rel="nofollow noreferrer">updated codes</a></strong>)</p>
  
  <p><strong><a href="https://stackoverflow.com/questions/47729073/inner-html-in-javascript-not-working#comment82432044_47729073"><code>Why a partial answer?</code></a></strong></p>