Question

我正在尝试从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>

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

Answer 1

你的问题很可能在这里：

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

您指定这应该是xmlhttp.open()的这个参数的异步操作，但是您没有实例化回调，只是假设数据将立即可用。换句话说，responseXML在调用它时应为null，因为它几乎没有时间填充。

尝试类似这样的内容，而不是行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.
    }
}

你必须在该函数中包装你想要做的任何事情。看起来您的JS可能还有其他问题，但看起来您还没有在这里发布完整的代码（这很好，可以解释一些其他问题）。

JavaScript不支持XML

1 个答案: