javascript - 'getElementsByTagName' comes up undefined - Stack Overflow

admin 管理员组

文章数量: 1086019

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 bed it over with as fine of a toothed b 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.

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 bed it over with as fine of a toothed b 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.

• javascript
• html
• xml
• xmlhttprequest
• getelementsbytagname

Share Improve this question Follow asked Jun 5, 2014 at 21:47 puppies_pidgeonspuppies_pidgeons 6111 gold badge22 silver badges99 bronze badges 3

• Maybe xmlDoc is undefined. Which browser did you test this in? See the note in MDN: "Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience." – Felix Kling Commented Jun 5, 2014 at 21:52
• Did you do even rudimentary debugging to see which line of code it was and whether it's xmlDoc or x[i] that is undefined? Basic debugging and troubleshooting should be done before you post here. – jfriend00 Commented Jun 5, 2014 at 21:58
• BTW, it is mon to wrap xhttp = new ActiveXObject("Microsoft.XMLHTTP"); in try..catch since you can't test for it and if not supported, will throw an error (though very few browsers should take that fork). – RobG Commented Jun 5, 2014 at 22:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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>

Just in case it actually IS a issue with asynchronous requests, this is how you do it asynchronously (I took the liberty to declare xhttp locally, too):

function loadXMLDoc(filename, callback)
{
    var xhttp;
    if (window.XMLHttpRequest)
    {
        xhttp=new XMLHttpRequest();
    }
    else // code for IE5 and IE6
    {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET",filename,true);
    xhttp.onreadystatechange = function()
    {
        if(xhttp.readyState === 4)
        {
            callback(xhttp.responseXML);
        }
    }
    xhttp.send();
}

loadXMLDoc("test.xml", function(xmlDoc)
{
    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;
    }
});

But make sure the result of the web-request has the Content-Type header of text/xml, or resultXML will not be set. In any case you might want to have a look at the documentation: https://developer.mozilla/en-US/docs/Web/API/XMLHttpRequest

Edit: also fixed your typos mentioned by Adrien Vinches.

本文标签： javascript39getElementsByTagName39 comes up undefinedStack Overflow