Как изменить значение каждого элемента html с указанным классом?

Как изменить значение каждого элемента html с указанным классом?

Я haspane список элементов, каждый из которых имеет size<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 < size.length; i++) { updateValue(size.item(i)); }code> element with class <ul> <li><span class="size">875</span></li> <li><span class="size">25984</span></li> <li><span class="size">12525125</span></li> <li><span class="size">23234</span></li> <li><span class="size">325235</span></li> <li><span class="size">0</span></li> <li><span class="size"></span></li> </ul>, 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.

Codepen: https://codepen.io/x84733/pen/GGGEzx?editors=1010

span
innerHTML

javascript,

0

Ответов: 2


2 accepted

What you're passing to function updateValue(span) { span.innerHTML = formatBytes(parseFloat(span.innerHTML)); } is the span element, not its content. You're also trying to set textContent on innerHTML (which is an HTMLCollection), not on the element you passed (v). Instead:

size[i]

Or you might use item rather than parseFloat.

A couple of side notes:

  • You can use / rather than /. The old item function is a bit archaic.

  • You never need to call sizeSpans on the result of /, the result of / is already always a number.

  • Strongly recommend naming variables containing lists, arrays, collections, etc. in the plural. E.g., size or similar, not getElementsByClassName.

  • If you need to support IE8 (hopefully you don't), it doesn't have querySelectorAll but it does have var size = document.querySelectorAll(".size") which is more general-purpose (accepts any valid CSS selector): textContent.

  • Similarly, if you need to support IE8, be aware it doesn't have textContent.


1

You just need First: pass the position of the item in the list Second: you apply the method on the item itself but you need to do on the innerHTML

function updateValue(v, i){
     size.item(i).innerHTML = formatBytes(parseFloat(v.innerHTML));
}

        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, i){
            if(v.innerHTML.length > 0){
            size.item(i).innerHTML = formatBytes(parseFloat(v.innerHTML));
}
        }


        for (var i = 0; i < size.length; i++) 
        {
            updateValue(size.item(i), i);
        }
        <ul>
          <li><span class="size">875</span></li>
          <li><span class="size">25984</span></li>
          <li><span class="size">12525125</span></li>
          <li><span class="size">23234</span></li>
          <li><span class="size">325235</span></li>
          <li><span class="size">0</span></li>
          <li><span class="size"></span></li>
        </ul>

javascript,
Похожие вопросы
Яндекс.Метрика