title: Javascript document.getElementsByClassName returning undefined
body: <p>I have a function which should be fairly straightforward and is supposed to be done after loading in order to reduce initial load time. </p>
  
  <p>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.</p>
  
  <pre><code>function populatePrefsList()
      {
          var divsList = new Array();
          divsList = document.getElementsByClassName("prefImg");
          var x = divsList.length;
          var i = 0;
          for(i=0; i&lt;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;
          }
      }
  </code></pre>
  
  <p>Obviously I have the breakpoint on <code>var x = divsList.length</code>...</p>
  
  <p>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.</p>
  
  <p>I have had <code>var divsList = document.getElementsByClassName("prefImg");</code></p>
  
  <p>If anyone could tell me where I have gone wrong then I would be grateful. There are about 50 divs with the className <code>prefImg</code>.</p>
  
  <p>Cheers</p>