title: How to change value of each html element with a specified class?
body: <p>I have a list of elements, each of them has a <code>span</code> element with class <code>size</code>, I want to convert each one of them to readable value (bytes => kb, mb, etc.) I'm not sure how to update those values on the page.</p>
  
  <p><strong>Codepen:</strong> <a href="https://codepen.io/x84733/pen/GGGEzx?editors=1010" rel="nofollow noreferrer">https://codepen.io/x84733/pen/GGGEzx?editors=1010</a></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 formatBytes(bytes,decimals) {
      if(bytes == 0) return '0 Bytes';
      var k = 1024,
          dm = decimals || 2,
          sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
          i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
  }
  
  
  var size = document.getElementsByClassName("size");
  
  
  function updateValue(v){
      size.innerHTML = formatBytes(v);
  }
  
  
  for (var i = 0; i &lt; size.length; i++) {
      updateValue(size.item(i));
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;&lt;span class="size"&gt;875&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="size"&gt;25984&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="size"&gt;12525125&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="size"&gt;23234&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="size"&gt;325235&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="size"&gt;0&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="size"&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>