javascript - 仅使用 Javascript 读取 XML 文件

Question

我有一个 XML 文件，需要使用 Javascript 来读取。然后将要读取的文本需要显示在 3 个标签标签内。

我可以读取 XML 文件，但当我尝试显示 3 个标签内的文本时，它只显示从 XML 文件中读取的最后一个内容，在本例中是“Pavarotti Gala Concert”。

我希望能够打印:

标签 1 =“帝国滑稽剧”

标签 2 =“隐藏你的心”

标签 3 =“帕瓦罗蒂盛大音乐会”

我做错了什么？

XML 文件

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
    </CD>
    <CD>
        <TITLE>Pavarotti Gala Concert</TITLE>
        <ARTIST>Luciano Pavarotti</ARTIST>
    </CD>
</CATALOG>

JAVASCRIPT

       if (window.XMLHttpRequest) {
           xmlhttp = new XMLHttpRequest();
        } else {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.open("GET", "text.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;

        var x = xmlDoc.getElementsByTagName("CD");

        for ( i = 0; i < x.length; i++) {

            var titleName = x[i].getElementsByTagName("TITLE")[0].innerHTML;

            document.getElementById("text1").innerHTML = titleName ;
            document.getElementById("text2").innerHTML = titleName ;
            document.getElementById("text3").innerHTML = titleName ; 
    }     
}

HTML

<label id="text1"></label>
<label id="text2"></label>

Answer 1

I can read the XML file but when I try to display the text inside the 3 labels it only shows me the last thing being read from the XML file which in this case is "Pavarotti Gala Concert".

在循环中，您将 titleName 设置为所有 text1、text2、text3，这样就可以感觉它们都等于最后一项。

尝试替换:

 document.getElementById("text1").innerHTML = titleName ;
 document.getElementById("text2").innerHTML = titleName ;
 document.getElementById("text3").innerHTML = titleName ; 

与:

document.getElementById("text" + (i + 1)).innerHTML = titleName; 

编辑:

var titleName = x[i].getElementsByTagName("TITLE")[0].innerHTML;

if (tileName.indexOf('hide') !== -1) {
   document.getElementById("text1").innerHTML = "Hide your heart";
   document.getElementById("text2").innerHTML = "";
   document.getElementById("text3").innerHTML = "";
   break; // stop looping
}