global var javascript

[kalyke]

I think the below code should work, but for some reason the setNumbers variable isn't keeping its value after the function. I thought if I declared variables outside of any function they would behave globally, so if I put data into them in a function it would carry over out of the function. Where the alert is at the bottom works, but if its moved one block lower it gives me an undefined. All the var's are delcared in the main part of code. Can someone tell me what I'm doing wrong?

var setNum = 0;
var imageArray = new Array();
var srcArray = new Array();
var altArray = new Array();
var imageSet = new Array(); /////Declared Here outside of any function
var setNumbers;
var numXml;
var xDocument;
var xmlDoc;
var counter=0;
var cnt = 0;
 
    var URL = "pictures.xml";
    var request = false;
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){}
        }
    }
    request.open("GET", URL, true);
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) { 
            xmlDoc = request.responseXML;
            xDocument=xmlDoc.getElementsByTagName("picture");
            numXml = xDocument.length;
            setNumbers = numXml / 4;
 
            for (i=0;i<numXml;i++){
                srcArray[i] = xmlDoc.getElementsByTagName("src")[i].firstChild.nodeValue;
                altArray[i] = xmlDoc.getElementsByTagName("alt")[i].firstChild.nodeValue;
                var img = "<img src=\'"+srcArray[i]+"\' onClick=\'replaceMain("+i+")\' onmouseover=\"this.style.cursor=\'pointer\'\" alt=\'"+altArray[i]+"\' width=144 height=108 >";
                imageArray[i] = "<li>"+img+"</li>";
 
                } 
//calls function fisherYates and puts new data into groups for display
fisherYates(imageArray);                        
while(counter < setNumbers) {
    imageSet[counter]=imageArray[cnt];
    cnt++;
    imageSet[counter]+=imageArray[cnt];
    cnt++;
    imageSet[counter]+=imageArray[cnt];
    cnt++;
    imageSet[counter]+=imageArray[cnt];
    cnt++;
    counter++;
}
alert(imageSet[2]); ///////////works here
}
alert(imageSet[2]); /////////doesn't work says "undefined"
}
    request.send(null);

[mrhoo]

The first alert fires before the xmlResponse returns a value (or doesn't), the second one after.

Put some code in the loop and look at the headers and text of the xmlHTTPRequest object.

[hsriat]

I think that the problem is being caused, because AJAX is asynchronous.

So what ever you are doing after sending AJAX request, you may delay the function that needs to manipulate the response text when you are using global variables.
Like this...

function doAfterAjaxResponds() {
   if (setNumbers=="") {//YOUR GLOBAL VARIABLE CONTAINING RESPONSE
 
      //KEEP CHECKING EVERY 1/10 SEC IF AJAX RESPONDED 
      wait = setTimeout("doAfterAjaxResponds()", 100);
   }
   else {
 
      //DO WHATEVER YOU HAVE TO DO WITH THE RESPONSE TEXT
 
   }
}