JavaScript getElementsByTagName() Undefined, IE Failure, AJAX XML file

I've been writing this code to dynamically load photo links from an XML document retrieved via AJAX. I have a global varibale xDoc that stores the response XML, and that I use in other functions so that I don't have to load the document every time. Please keep in mind that I am fairly new to JavaScript, so details would be great.

I get this error in Chrome: "Uncaught TypeError: Cannot call method 'getElementsByTagName' of undefined", and similar error messages in other browsers. However, my code still works in FireFox, Chrome, and Safari. When it comes to IE, however, every version fails to work. I cannot understand what is wrong, and why the element is undefined.

The error line is clearly marked in the code below. This is "eProject.link = eProject.photo.getElementsByTagName("edit")[0].firstChild.data;"

The data structure of my XML is as follows:

<project>
  <stuff>
  <stuff>
  <photos>
     <photo>
       <stuff>
       <edit>
     </photo>
  </photos>
</project>

Then this is the JavaScript:

// Initialize 
function init() {
    // Set the xml file 
    loadXMLDoc("../xml/featured.xml");
}
window.onload = init;

// Define xDoc global variable
var xDoc;
var proImages = new Array();

// Retrieve XML document as document object
function loadXMLDoc(url) {
    var req = null;
    try {
        req = new XMLHttpRequest();
        req.overrideMimeType("text/xml");
    }
    catch(e) {
        req = null;
    }
    if (req) {
        xDoc = null;
        req.open("GET", url, true);
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                if (req.status == 200) {
                    xDoc = req.responseXML;
                    if (xDoc && typeof xDoc.childNodes != "undefined" && xDoc.childNodes.length == 0) {
开发者_Go百科                        xDoc = null;
                    }
                    else {
                        eProject = xDoc.getElementsByTagName("project")[0];
                        eProject.id = eProject.getElementsByTagName("id")[0].firstChild.data;
                        getProject(eProject.id);
                    }
                }
            }
        }
        req.send(null);
    }
}



function getProject(id) {
count = xDoc.childNodes.length;
i = 0;
for (i; count; i = i + 1) {
    eProject = xDoc.getElementsByTagName("project")[i];
    eProject.id = eProject.getElementsByTagName("id")[0].firstChild.data;
    if (eProject.id == id) {

        // Remove old numbers
        cImages = document.getElementById("cImages");
        if (cImages.firstChild) {
            while (cImages.firstChild)
            {
                cImages.removeChild(cImages.firstChild);
            }
        }

        // Reset Array
        proImages.length = 0;

        eProject.photos = eProject.getElementsByTagName("photos")[0];
        eProject.phot = eProject.photos.getElementsByTagName("photo");
        pCount = eProject.phot.length;
        i = 0;
        for (i; pCount; i = i + 1) {
            /*
             * THIS IS WHERE THE ERROR IS
             */

            eProject.photo = eProject.phot[i];
            // This is the line of code that generates the error message
            eProject.link = eProject.photo.getElementsByTagName("edit")[0].firstChild.data;
            proImages[i] = eProject.link;
            dynamImg = document.getElementById('dynamImg');
            dynamImg.src = proImages[0];
            dynamImg.setAttribute('onclick', 'getNumImg(1)');
            nButton = document.createElement('button');
            nButtonTxt = document.createTextNode(i + 1);
            nButton.appendChild(nButtonTxt);
            nButton.type = "button";
            nButton.value = i;
            if (nButton.value == '0') {
                nButton.setAttribute('id', 'nButtonSelect');
            }
            nButton.setAttribute('onclick', 'getNumImg(' + i + ')');
            cImages.appendChild(nButton);
        }
        break;
    }
}

}

---

Am I correct that you have two loops one inside another and in both of them you use "i" variable as iterator? shouldn't you use "j" in the second loop?

---

I think you want this in your for loop for (i; i < pCount; i = i + 1) { (note the i <) - otherwise it is just checking to see if pCount is defined and will run indefinitely. I suspect it is erroring when i gets bigger than the number of elements you have in eProject.phot, at which point eProject.photo will be undefined.

---

var t = quotes[i].getElementsByTagName("t")[0].childNodes[0].nodeValue;