Javascript document.getElementsByClassName returning undefined

Question

I have a function which should be fairly straightforward and is supposed to be done after loading in order to reduce initial load time.

Basically I am using this code to get all of the elements with class "prefImg" and do some stuff with them. But when debugging in firebug, it says that the var divsList is undefined.

function populatePrefsList()
    {
        var divsList = new Array();
        divsList = document.getElementsByClassName("prefImg");
        var x = divsList.length;
        var i = 0;
        for(i=0; i<divsList.length; i++) {
            var imgs = divsList[i].getElementsByTagName("img");
            var imgSRC = imgs[0].src;
            var alt = imgs[0].alt;
            var descs = divsList[i].getElementsByTagName("h4");
            var desc = descs[0].innerHTML;
            //var thisPref = new preference(imgSRC, alt, desc);
            //prefsList[i] = thisPref;
        }
    }

Obviously I have the breakpoint on var x = divsList.length...

I cannot understand this, I initially had the script in the Head of the page, but figuring it may have not loaded the divs yet, have moved it to the bottom of the Body. This did not solve it.

I have had var divsList = document.getElementsByClassName("prefImg");

If anyone could tell me where I have gone wrong then I would be grateful. There are about 50 divs with the className prefImg.

Cheers

use this `var divsList = [];` instead of this `var divsList = new Array();` — DaveAlger, Jun 27 '12 at 21:54

score 6 · Answer 1 · answered Jun 27 '12 at 21:41

6

You can use querySelectorAll instead of getElementsByClassName:

change divsList = document.getElementsByClassName("prefImg");

to this divsList = document.querySelectorAll(".prefImg");

DEMO - http://jsfiddle.net/ya3gU/

BTW, you do not need to declare the array divsList before you set it. Just do:

var divsList = document.querySelectorAll(".prefImg");

answered Jun 27 '12 at 21:41

xcopy

2,248
18
24

It still claims to be undefined but in an interesting turn of events, it now claims it has a length of 48, which presumeably means it is defined, and its a problem with Firebug? Note it is also Working in terms of the actual Function now works. It's just a bit of a pain to debug it. – Ryan Durrant Jun 27 '12 at 21:50
2

I'm not sure how this answers the question at all. – gdoron Jun 27 '12 at 21:51
With some debuggers, the resulting collection that is returned by querySelectorAll is shown as undefined. I believe that this is due to the fact that the value that is returned is a NodeList and not a standard Array. – xcopy Jun 27 '12 at 22:27

score 3 · Answer 2 · answered Feb 15 '13 at 23:09

3

do not write this code in the head.. because this means the body did not load yet. do it in the end of your body tag or use-

window.addEventListener("load", function() { // code here });

answered Feb 15 '13 at 23:09

Erez Avidan

61
4

score 1 · Answer 3 · answered Jun 27 '12 at 21:53

you can use an eventhandler to the load event of the window object, to run the script only when the window has finished load

 function populatePrefsList()
  {
    var divsList = new Array();
    divsList = document.getElementsByClassName("prefImg");
    var x = divsList.length;
    var i = 0;
    for(i=0; i<divsList.length; i++) {
        var imgs = divsList[i].getElementsByTagName("img");
        var imgSRC = imgs[0].src;
        var alt = imgs[0].alt;
        var descs = divsList[i].getElementsByTagName("h4");
        var desc = descs[0].innerHTML;
        //var thisPref = new preference(imgSRC, alt, desc);
        //prefsList[i] = thisPref;
    }
}


 window.onload = function(){
 populatePrefsList();
}

score 0 · Answer 4 · answered Jun 27 '12 at 23:18

Older browsers (like IE6, IE7, IE8) doesn´t support getElementsByClassName and so they returns undefined.

In newer browsers the return value is never undefined. It is mostly a HTMLCollection (but after W3C spec it should be a NodeList).

https://developer.mozilla.org/en/DOM/document.getElementsByClassName

But I think in your case the real problem is a bug in Firebug:

http://code.google.com/p/fbug/issues/detail?id=5336

It is fixed and a patch is committed and will be part of Firebug 1.10a6

score 0 · Answer 5 · answered May 23 '20 at 07:06

Because it returns a HTMLCollection, so you should add a [number] at the end of the line:

divsList = document.getElementsByClassName("prefImg")[0];

Also it is a good idea to load this function after everything load completely by using:

window.load = function() {
    populatePrefsList();
}

score -1 · Answer 6 · answered Jun 27 '12 at 21:38

This is not supported by all browsers...any browser that does not support it, you would have to implement your own.

function getElementsByClassName(node,classname) {
    if (node.getElementsByClassName)
        return node.getElementsByClassName(classname);
    else {
        // custom
    }
}

Javascript document.getElementsByClassName returning undefined

6 Answers6

Linked