添加標題和藝術家的DIV

Question

我試圖找出如何讓歌曲標題藝術家轉換成從該代碼的每個DIV的人。該代碼將來自XML文件的所有歌曲放入播放列表中。我的標題div是songTitle，藝術家div是藝術家。已經嘗試什麼在getplayList功能複製併除去輸出，UL然後在onsongSelect函數的document.getElementById（「SONGTITLE」）投入的innerHTML =標題。但我只能得到div中播放列表中的最後一首歌曲標題。任何幫助，將不勝感激。

function getplayList() 
    { 
     var parser = new DOMParser(); 
     xmlDocument = parser.parseFromString(xml, "text/xml"); 
     var elementsArray = xmlDocument.documentElement.getElementsByTagName ('composition'); 
     var arrayLength = elementsArray.length; 
     var output = "<ul>"; 

     for(var i=0; i < arrayLength; i++) 
     { 
      var title = elementsArray[i].getElementsByTagName('title')[0].firstChild.nodeValue; 
      var artist = elementsArray[i].getElementsByTagName('artist')[0].firstChild.nodeValue; 
      var time = elementsArray[i].getElementsByTagName('time')[0].firstChild.nodeValue; 
      var fileName = elementsArray[i].getElementsByTagName('filename')[0].firstChild.nodeValue; 


      output += ("<li onclick='songSelect(\"" + fileName + "\")'>" + title + " - " + artist + "</li>"); 


     } 

      output += "</ul>"; 
      document.getElementById("playList").innerHTML = output; 
    } 

這是songSelect函數;

function songSelect(fn) 
    { 
     document.getElementById("songs").src = fn; 
     playMusic(); 
    } 

XML文件顯示，僅三首歌曲有更長期張貼所有：

var xml = '<?xml version="1.0" encoding="utf-8"?>'; 

xml +='<music>'; 
xml +=' <composition>'; 
xml +=' <title>Songs On The Radio</title>'; 
xml +=' <artist>No Justice</artist>'; 
xml +=' <time>4.24</time>'; 
xml +=' <filename>Songs On The Radio.mp3</filename>'; 
xml +=' </composition>'; 
xml +=' <composition>'; 
xml +=' <title>Chillin It</title>'; 
xml +=' <artist>Cole Swindell</artist>'; 
xml +=' <time>3.17</time>'; 
xml +=' <filename>Chillin It.mp3</filename>'; 
xml +=' </composition>'; 
xml +=' <composition>'; 
xml +=' <title>Tippin Point</title>'; 
xml +=' <artist>Dallas Smith</artist>'; 
xml +=' <time>2.58</time>'; 
xml +=' <filename>Tippin Point.mp3</filename>'; 
xml +=' </composition>'; 
xml +='</music>'; 

Answer 1

不要在你的腳本收出ul假設它是在你的HTML關閉。評論說，這可行。

參見：http://jsfiddle.net/s7mLL/1/

更新

在這種情況下，你可以改變你songSelect方法接受一個元素參數，以獲得點擊的元素，假設你的div有nowPlaying的ID：

function songSelect(fn, element) { 
    document.getElementById("songs").src = fn; 
    playMusic();   
    document.getElementById("nowPlaying").innerHTML = "Now Playing: " + element.innerHTML 
} 

，並在你的for循環以下變化：

output += ("<li onclick='songSelect(\"" + fileName + "\",this)'>" + title + " - " + artist + "</li>");

更新小提琴：http://jsfiddle.net/s7mLL/2/

我也可能會建議你主演調查jQuery。它使得這種DOM操作變得更容易，並且給你更多的東西。

進一步更新

我不會解析XML的兩倍。更改方法參數接受文件名和標題，並通過這些

function songSelect(fileName, songTitle) { 
     document.getElementById("songs").src = fileName; 
     playMusic();   
     document.getElementById("nowPlaying").innerHTML = "Now Playing: " + songTitle 
    } 

並進行以下改變你的for循環：

output += ("<li onclick='songSelect(\"" + fileName + "\",\"" + title + "\")'>" + title + " - " + artist + "</li>");

http://jsfiddle.net/s7mLL/4/

獎金

這裏是一個快速和骯髒的jQuery的演示：http://jsfiddle.net/U88UQ/