JavaScript is not working with XML

我正在尝试从XML文件中获取文本，并且似乎不起作用。我想要单击按钮时输出，但是有此错误Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

这是我的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>

我的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;

我的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>

我无法弄清楚我的错误，如果有人可以帮助我，我将不胜感激。

您的问题很可能在这里：

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

您要指定的是，这应该是与xmlhttp.open()的Paramater一起使用的异步操作，但是您不会实例化回调，并且只是假设数据将立即可用。换句话说，responseXML在打电话时应为无效，因为它几乎没有时间填充。

尝试这样的东西，而不是您的行xmlDoc = xmlhttp.responseXML和随后的代码：

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.
    }
}

您必须在该功能中使用XML的任何内容。看起来JS可能还有其他问题，但看起来您还没有在此处发布完整的代码（这很好，可以解释其他一些问题）。

相关内容

最新更新

热门标签：