getElementsbyClassName to find and act on all elements

Question

Can't quite get this code to enact on all elements within my html - I know [0] means just one - but the code doesn't work without it as its raw js

 window.onload = function yourFunction(){
    var str = document.getElementsByClassName('icon')[0].innerHTML;
    
    var res = str.replace(/_s\.png/g, ".png")
   
    document.getElementsByClassName('icon')[0].innerHTML = res;

    setTimeout(yourFunction, 5000);
}

yourFunction();

See the JSFiddle

I want to it work for all _s instances within the 'icon' classes

`getElementsByClassName` returns a `NodeList`. You have to use subscript to access a certain elements, such as looping over to access all of them — Andrew Li, Aug 10 '16 at 15:51

Juan Ferreras · Accepted Answer · 2016-08-10T15:53:32.147

0

You should use a for loop. To iterate on every element matching your array-like object of elements returned by getElementsByClassName.

window.onload = function yourFunction(){
    var elements = document.getElementsByClassName('icon');
    if (elements){
      for (var i = 0; i<elements.length; i++){
        elements[i].innerHTML = elements[i].innerHTML.replace(/_s\.png/g, ".png");
      }
    }
    setTimeout(yourFunction, 5000);
}

yourFunction();

edited Aug 10 '16 at 15:53

answered Aug 10 '16 at 15:52

Juan Ferreras

2,801
2
13
16

1

Code without explanation doesn't help. – Andrew Li Aug 10 '16 at 15:52
Thank you, I've added a small explanation on why the `for` is needed. – Juan Ferreras Aug 10 '16 at 15:58
What would happen if you remove `if(elements)`? – PM 77-1 Aug 10 '16 at 16:01

getElementsbyClassName to find and act on all elements

1 Answers1