Geek Answers Handbook

Javascript document.getElementsByClassName returns undefined

I have a function that should be simple enough and should be executed after loading in order to reduce the initial loading time.

I mainly use this code to get all the elements with the prefImg class and do something with them. But when debugging, firebug says that 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 a breakpoint on var x = divsList.length ...

I do not understand this, I initially had a script in the Head of the page, but, believing that he may not have loaded the divs yet, moved it to the bottom of the Body. It didn’t decide.

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

If someone tells me where I did wrong, I would be grateful. There are about 50 divs with the class prefImg .

Greetings

+4
source share
5 answers

You can use querySelectorAll instead of getElementsByClassName:

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

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

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

By the way, you do not need to declare a divsList array before setting it. Just do:

 var divsList = document.querySelectorAll(".prefImg");
+5
source

do not write this code in the head. because it means that the body has not yet booted. do this at the end of your body tag or use -

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

+1
source

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

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

you can use an event handler for the window object's load event to run the script only when the window loads finish

  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(); }
0
source

Older browsers (e.g. IE6, IE7, IE8) do not support getElementsByClassName , so they return undefined .

In new browsers, the return value is never undefined . this is basically a HTMLCollection (but after the W3C specification it should be a NodeList ).

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

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

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

He fixed and fixed the patch and will be part of Firebug 1.10a6

0
source

More articles:


All Articles