4

I have this loop code to reduce the DOM calls in my Javascript, and reuse them. 

aarr = [];

for (var z=1; z<=10; z++) {
    c = z-1;
    aarr[c] = document.getElementById("a"+z); 
}

I have been shown that if the code is ran before the DOM is complete, then the array is null. Moving the script after the last html code will work.

So now I want to put this code inside the window.onload event so to not have to move the script code to the bottom of the page. But it apparently does not work because it appears that the array loop is executed before the DOM is completed.

window.onload=function(){

    var aarr = [];
    for (var z=1; z<=10; z++) {
        c = z-1;
        aarr[c] = document.getElementById("a"+z);
    }
}

Also, I have tried to remove the "var" to remove scope without making a difference.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jamex
  • 1,164
  • 5
  • 22
  • 34
  • 1
    read http://stackoverflow.com/questions/978740/javascript-how-to-detect-if-document-has-loaded-ie-7-firefox-3 – Mihai Iorga Sep 06 '11 at 22:55

4 Answers4

3

You could also try this approach without using a framework:

window.onload = (function(){
    return function(){
        var aarr = [];
        for (var z=1; z<=10; z++) {
            aarr.push(document.getElementById("a"+z));
               alert(aarr[z-1].id);
        }
     };
})();

JSFiddle

Richard A
  • 2,100
  • 15
  • 13
  • 1
    Hey jamex.i made some changes to ur loop and it works fine for me..see the fiddle added :) – Richard A Sep 07 '11 at 15:13
  • @Richard Aikoroje: Next time fork the fiddle. In addition: `(function(){})();` is useless. The only thing you achieve is that you expand the `[[scope]]`. – Saxoier Sep 08 '11 at 01:02
0

If you can use jquery, then you can use the document ready listener:

$(document).ready(function() {

  var aarr = [];
  for (var z=1; z<=10; z++) {
    c = z-1;
    aarr[c] = document.getElementById("a"+z);

 }

});

http://www.jquery.com

as per the comment above, have you tried:

if (document.readyState === "complete") { init(); } // call whatever function u want.
Rick Kukiela
  • 1,135
  • 1
  • 15
  • 34
  • Thanks Rick, I am not using jquery, so this won't work for me. – Jamex Sep 07 '11 at 00:11
  • Thanks, I read that post before and I actually am getting this to work for firefox with that code, unfortunately, IE versions are all giving me errors. I am walking through the script line by line. – Jamex Sep 07 '11 at 04:40
0

Better to use a function without pre-scanning the dom to create a cache, Pre-scanning is not needed when you use a simple function with a cache construction. With jQuery you can can create a function like this (native javascript method below this):

window.__jcache = {};

  window.$jc = function(u) // jQuery cache
  {
   if( u == undefined )
    { return window.jQuery; }
   if( typeof u == 'object' || typeof u == 'function' )
    { return window.jQuery(u); }
   if( window.__jcache[u] == undefined )
    { window.__jcache[u] = window.jQuery(u); }

   return window.__jcache[u]; 
  };

Or without a framework (native javascript):

window.__domcache = {};

  window.getObj = function(u) // jQuery cache
  {
   if( u == undefined )
    { return null; }
   if( typeof u == 'object' || typeof u == 'function' )
    { return u; }
   if( window.__domcache[u] == undefined )
    { window.__domcache[u] = document.getElementById(u); }

   return window.__domcache[u]; 
  };

So you can do:

var o = $jc('a1'); // for jquery version

var o = getObj('a1'); // The native javascript method (jamex)

That does the trick.

Greetz, Erwin Haantjes

Codebeat
  • 6,501
  • 6
  • 57
  • 99
0

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

MDN - window.onload

I guess you try calling code outside of onload. See this fiddle

Saxoier
  • 1,287
  • 1
  • 8
  • 8