javascript syntax - why function does not recognize an outside array that is declared and filled

the function that I wrote below contains arrays aarr and barr to store DOM calls to reduce DOM traversal. It works right now, but I want to reuse these arrays in other functions, so I tried to move the array declaration and the for loop outside the function, the function errors out when it reaches the first reference to aarr[i], as though the function does not recognized aarr[]. I understand that the "var" will give scope, but I tried removing/including the var and it still does not work.

Please explain

TIA

This works when aarr[] is declared inside function (edited to include the closing tag for "for" loop)

function display (namearr, current) {

var aarr = [];
var barr = [];


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

 var tldstr = document.getElementById("dlist").innerHTML;
    tldstr = tldstr.slice(0, -1)
    var tldarr = tldstr.split(",")开发者_JAVA百科;

    index = current - 1;    
    var arrlen = tldarr.length;
    var img = "<img src='../loader1.gif' alt='loading' width='40' />";

    for (i=0; i<10; i++){


      if (index >= arrlen) {
            aarr[i].className = "tldn";
            barr[i].className = "tldn";


      }

      else if ( tldarr[index] == "n" || tldarr[index].length != 6) 
            {

            aarr[i].innerHTML = img;
            barr[i].innerHTML = img;


            }//close  first elseif
      else {
            tldstr = tldarr[index];

            aarr[i].className = "tld"+tldstr.charAt(0);
            barr[i].className = "tld"+tldstr.charAt(1);

           }//close second elseif

        index++;
        }//close first for loop

}

This does not work (with or without the "var" declaration), function errors out at first encounter of aarr[i]

var aarr = [];
var barr = [];


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

function display (namearr, current) {
.
.
.
           aarr[i].className = "tldn"; //function errors out at first encounter of aarr[i]
.
.
.
}

---

You also moved the loop outside the function. This probably will not work, as it means your getElementById runs as the script is being loaded. The DOM tree has not been constructed, so getElementById returns null.

---

I don't think it's a problem with variable scoping but with your indices. I can't from the example quite figure out what index and current are supposed to be, but either way if the for loop is ran before the dom is ready, then you're arrays are obvisouly empty and the indexing will be messed up.