Question

My JavaScript function

function B_modeWindow (id,cords) {  
    loading();

    var xmlhttp;

    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    } else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {

            var cords = document.getElementById(cords)
            cords.innerHTML=xmlhttp.responseText;
            var xy = cords.split("x");          
            hideloading();
        }
    }

    xmlhttp.open("GET","processMapEdit.php?id="+id+"&x="+xy[0]+"&y="+xy[1],true);
    xmlhttp.send();
}

returns:

Uncaught ReferenceError: xy is not defined 

in:

xmlhttp.open("GET","processMapEdit.php?id="+id+"&x="+xy[0]+"&y="+xy[1],true);

It seems that xy is just not there, but it’s defined just 5 lines above! What is wrong here?

Answer 1

xy is only defined in the scope of the anonymous function xmlhttp.onreadystatechange = function () { // valid scope of xy }. Thus, it’s not accessible outside of this anonymous function. Use the following instead:

function B_modeWindow (id,cords) {  
    loading();

    var xmlhttp;

    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    } else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    var xy = cords.split("x"); 

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            var cordsElement = document.getElementById(cords);
            cordsElement.innerHTML=xmlhttp.responseText;      
            hideloading();
        }
    }

    xmlhttp.open("GET","processMapEdit.php?id="+id+"&x="+xy[0]+"&y="+xy[1],true);
    xmlhttp.send();
}

This way, the scope of xy is the function B_modeWindow instead of the anonynmous function.

Also, note that even if you could access xy outside of the anonymous function (which you can’t), xy won’t be defined as well, since you are defining it only when the AJAX request completes, and you need to use it to actually make the AJAX call.

Another suggestion is for you to use different variable names for cords. You are using it first to split its content by x, and then defining another cords variable to assign a DOM element. Although this works, it can be confusing.