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

Answer 1

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");

Answer 2

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 });