Question

我试图通过JavaScript将XML文件中的数据显示到我的网站。我已经使用了这个JavaScript代码，只使用了一个基本的HTML文档，它工作正常，显示数据并允许我从XML文件中单击和查看其他数据。

但是，当我将代码复制到我网站的某个页面时，代码将无法运行，并且我不断收到错误消息＆＃34;无法读取属性＆＃39; getElementsByTagName＆＃39; of null＆＃34;。我觉得这很奇怪，因为它与基本HTML页面使用的代码完全相同，而且工作正常...

我在下面的网站上附上了HTML。任何建议或修复强文将不胜感激。

    <section id="middle_XML">
    <h1>BOOK LIST</h1>

<div align ='center'>

<p>Click on a CD to display album information.</p>
<p id='showBook'></p>
<table id="demo"></table>
</div>

<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "booklist.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 
x = xmlDoc.getElementsByTagName("book");

table="<tr><th>Artist</th><th>Title</th></tr>";

for (i = 0; i <x.length; i++) { 
table += "<tr onclick='displayBook(" + i + ")'><td>";
table += x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
table += "</td><td>";
table +=  x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;
table += "</td></tr>";
}

document.getElementById("demo").innerHTML = table;

function displayBook(i) {
document.getElementById("showBook").innerHTML =
"Artist: " +
x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"<br>Title: " +
x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue +
"<br>Year: " + 
x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue +
"<br>About: " +
x[i].getElementsByTagName("about")[0].childNodes[0].nodeValue +
"<br>Price: " + 
x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
}
</script>



</section>

以下是适用于基本HTML页面的代码。为什么在复制到我的网页时不会起作用？

<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
 }
th,td {
padding: 5px;
}
</style>
<body>
<div align ='center'>

<p>Click on a CD to display album information.</p>
<p id='showBook'></p>
<table id="demo"></table>
</div>

<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "booklist.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 
x = xmlDoc.getElementsByTagName("book");
table="<tr><th>Artist</th><th>Title</th></tr>";
for (i = 0; i <x.length; i++) { 
table += "<tr onclick='displayBook(" + i + ")'><td>";
table += x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
table += "</td><td>";
table +=  x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;
table += "</td></tr>";
}
document.getElementById("demo").innerHTML = table;

function displayBook(i) {
document.getElementById("showBook").innerHTML =
"Artist: " +
x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"<br>Title: " +
x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue +
"<br>Year: " + 
x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue +
"<br>About: " +
x[i].getElementsByTagName("about")[0].childNodes[0].nodeValue +
"<br>Price: " + 
x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
}
</script>

</body>
</html>

无法阅读属性＆＃39; getElementsByTagName＆＃39; of null - XML＆amp; JS

0 个答案: