Search code examples
javascripthtmlxmlxmlhttprequestgetelementsbytagname

'getElementsByTagName' comes up undefined

I am working on a content flow that displays images based on xml content. I'm building it as a site, so it's html and javascript, and for some unknown reason-and believe me I've combed it over with as fine of a toothed comb as I can- my javascript just isn't loading my xml (thats what I'm fairly certain the problem is, but I could be wrong) and it's throwing me the error that 'getElementsByTagName' is null. Now currently i havent built in the full functionality, I just wanted to test the xml by having it read out as text so bear with me here.

loadXMLDoc.js:

function loadXMLDoc(filename)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // code for IE5 and IE6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}

my internal java in the html:

<script>
xmlDoc = loadXMLDoc("test.xml");
    var x = xmlDoc.getElementsByTagName("song");
    for (i=0; i<x.length; i++);
    {
     var a = (x[i].getElementsByTagName("source")[0].childnodes[0].nodeValue);
     var b = (x[i].getElementsByTagName("artist")[0].childnodes[0].nodeValue);
     var c = (x[i].getelementsByTagName("title")[0].childnodes[0].nodeValue);
     var par = '<img class= "item" href ="#" ondblclick = "confirm()" src ="' +'" "title="' +b+ '"-"'+ c+ ' " />';
     document.getElementById("demo").innerHTML += par;
     }
</script>

and the full error:

Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined album.html:24 (anonymous function)

and for funsies my xml sample:

<song>
<source>imgs/Beck.jpg</source>
<title>Modern Guilt</title>
<artist>Beck</artist>
</song>

Hopefully I covered all that would be needed, I know its probably something silly, but I can't nail it down.

Solution

  • First of all you have a ";" that shouldn't be here after your for loop:

    for (i=0; i<x.length; i++);
    {

    it should be 

    for (i=0; i<x.length; i++) {

    because what is happening here is that you for loop iterates over the elements of x but without executing your body.

    Secondly, your 

    var c = (x[i].getelementsByTagName("title")[0].childnodes[0].nodeValue);

    contains a typo, it should be getElementsByTagName with a e capitalized

    Here is the code I used and it is working correctly:

    <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>

<div id="demo"></div>

<script>
var loadXMLDoc = function (filename) {
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.open("GET",filename,false);
        xhttp.send();

        if (xhttp.readyState === 4 && xhttp.status === 200) {
            return xhttp.responseXML;
        }
        return {error : 'file not found'};

    },
    xmlDoc = loadXMLDoc("test.xml"),
    testObj = xmlDoc,
    x = testObj.getElementsByTagName("song");
for (i=0; i<x.length; i++) {
    var objectElem = x[i];
     var a = (objectElem.getElementsByTagName("source")[0].textContent),
         b = (objectElem.getElementsByTagName("artist")[0].textContent),
         c = (objectElem.getElementsByTagName("title")[0].textContent),
         par = '<img class="item" href="#" ondblclick="confirm()" src="'+ a +'" title="' +b+ '-'+ c+ '" />';
     console.log(par);
     document.getElementById("demo").innerHTML += par;
 }
</script>

</body>

</html>

    and here is my test.xml (place in the same folder as the above code):

    <songlist>
    <song>
        <source>imgs/Beck.jpg</source>
        <title>Modern Guilt</title>
        <artist>Beck</artist>
    </song>
    <song>
        <source>imgs/Beck2.jpg</source>
        <title>Modern Guilt2</title>
        <artist>Beck2</artist>
    </song>
</songlist>