CODEWITHSUNDEEP
xml
chichiKoala
chichiKoala

Reputation: 9

JavaScript is not working with XML

I'm trying to get the text from a XML file and seems like its not working. i want the output when the button is clicked but there's this error Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

this is my html 

                <!DOCTYPE html>
            <html lang="en">
            <head>
            <meta charset="utf-8">
            <title>Course Info</title>
            </head>
            <body>
            <h1>Course Information Search</h1>
            <form action="" method="GET">
            <select name="course" id="course">
                <option value="420-121">420-121</option>
                <option value="420-122">420-122</option>
                <option value="420-123">420-123</option>
                <option value="420-221">420-221</option>
                <option value="420-222">420-222</option>
                <option value="420-223">420-223</option>
                <option value="420-224">420-224</option>

            </select>
            Select a course to see the course name and teacher assigned<br><br>
            <input type="button" id="go" value="go!" onclick = "findteacher();">

            </form>
            <br><br>
            <div id="courseInfo"></div>
             <script src="jquery-1.11.2.js" type="text/javascript"></script>
             <script type="text/javascript" src="jquery.js"> </script>    

            </body>
            </html>

my javascript

                function findteacher () {

                if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.open("GET","course.xml",true);
            xmlhttp.send();
            xmlDoc=xmlhttp.responseXML; 

            x=xmlDoc.getElementsByTagName("class");
            i=0;

            value=(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue);
            course=(x[i].getElementsByTagName("course")[0].childNodes[0].nodeValue);
            teacher=(x[i].getElementsByTagName("teacher")[0].childNodes[0].nodeValue);
            txt="Number: " + value + "<br>Course: " + course + "<br>Teacher: "+ teacher;


                        document.getElementById('courseInfo').innerHTML 
                    } 

            function clear () {
                document.getElementById('courseInfo').innerHTML = '';
            }

            window.onload = findteacher;

            document.getElementById('go').onclick = findteacher;
            document.getElementById('course').onclick = clear;

my xml

                <?xml version="1.0" encoding="UTF-8"?>

            <computer>

            <class>
                <value>420-123</value> 
                    <course>Web Interface Design</course>
                <teacher> Jennifer Liutec</teacher>
            </class>

            <class>
                <value>420-121</value>
                    <course>Computer Fundamentals</course>
                <teacher>Amin Ranj Bar</teacher>
            </class>

            <class>
                <value>420-122</value>
                    <course>Introduction to Programming</course>
                <teacher>Samia Ramadan</teacher>
            </class>

            <class>
                <value>420-221</value>
                    <course>Programming with Java</course>
                <teacher>Samia Ramadan</teacher>
            </class>

            <class>
                <value>420-224</value>
                    <course>Configuring and Maintaining Computers</course>
                <teacher>Samia Ramadan</teacher>
            </class>

            <class>
                <value>420-222</value>
                    <course>Web Site Planning and Implementation</course>
                <teacher>Jennifer Liutec</teacher>
            </class>

            <class>
                <value>420-223</value>
                    <course>Operating Systems and Scripting</course>
                <teacher>Soumaya Chaffar</teacher>
            </class>

            </computer>

i cant figure out my error, i would appreciate if someone can help me.

Upvotes: 0

Views: 393

Answers (1)

Dan Field
Dan Field

Reputation: 21641

Your problem is most likely here:

xmlhttp.open("GET","course.xml",true);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

You're specifying that this should be an asynchronous operation with the this paramater of xmlhttp.open(), but then you're not instantiating a callback, and just assuming the data will be available immediately. In other words, responseXML should be null when you call it, because it has had almost no time to fill.

Try something like this instead of your line xmlDoc = xmlhttp.responseXML and the code that follows it:

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      xmlDoc = xmlhttp.responseXML;
       i=0;

       value=(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue);
       course=(x[i].getElementsByTagName("course")[0].childNodes[0].nodeValue);
       teacher=(x[i].getElementsByTagName("teacher")[0].childNodes[0].nodeValue);
       txt="Number: " + value + "<br>Course: " + course + "<br>Teacher: "+ teacher;


       document.getElementById('courseInfo').innerHTML ... //etc.
    }
}

You'll have to wrap whatever you want to do with the XML in that function. It also looks like there may be other issues with your JS, but it also looks like you didn't post your full code here (Which is fine and may explain some other issues).

Upvotes: 1

Related Questions