1
タスクのために、アルバムのタイトルとすべての曲のリストを表示する必要があります。しかし、私は各アルバムの最初の曲を表示するだけで立ち往生しています。それらをすべてどのように表示するのですか?インデックス値を変更する必要があると仮定しますが、すべての値を取得するためにそれを書き込む方法がわかりません。私のコードは以下の通りです。配列全体をループする - すべてのインデックス
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<script>
function loadDoc() {
// This function will load the xml file and connect it to the webpage
var xhttp = new XMLHttpRequest();
// This is used to exchange data with the server, allowing for parts of the page to change without reloading the page
xhttp.onreadystatechange = function() {
// This defines a function to be called when the readystate property changes
if (this.readyState == 4 && this.status == 200) {
// This states that if the request is finished (readystate == 4) and the status returned is ok (this.staus == 200)
extractSongs(this);
// This runs the function to display the data from the xml file
}
};
xhttp.open("GET", "CDLibrary.xml", true);
// This gets the xml file
xhttp.send();
// This sends a request to the server
}
function extractSongs(xml) {
// This function will extract and display data from the xml file
var i;
var xmlDoc = xml.responseXML;
// This returns the document containg a response to my request
var table="<tr><th>Artist</th><th>Title</th></tr>";
// This sets up the table
var CdList = xmlDoc.getElementsByTagName("CD");
// This creates an array of the data from the xml file
for (i = 0; i <CdList.length; i++) {
// This will loop through the array by the number of cds in the array
table += "<tr><td>" +
CdList[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"</td><td>" +
CdList[i].getElementsByTagName("track")[0].childNodes[0].nodeValue +
"</td></td>" ;
// These display the elements by the tag name and generate them as table data
}
document.getElementById("CdCollection").innerHTML = table;
// This gets the table from the html and makes it equal to the table from the javascript
}
</script>
</head>
<body>
<h1>My CD Collection</h1>
<button type="button" onclick="loadDoc()">Get my collection</button>
<br><br>
<table id="CdCollection"></table>
</body>
は私にあなたのxmlファイルを表示 – Mahi
それはリストの1項目だけです。どのようにすべての曲を印刷することを期待することができます – Mahi