DIV에 제목과 아티스트 추가

Question

나는이 코드에서 각 아티스트에게 노래 제목을 부여하는 방법을 알아 내려고하고 있습니다. 이 코드는 XML 파일의 모든 노래를 재생 목록에 넣습니다. 내 제목 div는 songTitle이고 artist div는 아티스트입니다. getplayList 함수에서 whats를 복사하고 출력을 제거하려고 시도했습니다. ul 다음에 onsongSelect 함수를 넣습니다. document.getElementById ("songTitle"). innerHTML = title; 하지만 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; 
    } 

이것은 노래 선택 기능입니다.

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

그것이 당신의 HTML에 폐쇄 가정 스크립트에 ul을 닫지 마십시오. 저것을 논평하는 것은 작동합니다.

참조 : http://jsfiddle.net/s7mLL/1/

업데이트

당신이 당신의 div이 nowPlaying의 ID가 가정, 클릭 한 요소를 얻을 수있는 요소 매개 변수를 허용하도록 songSelect 방법을 변경할 수있는 경우 :

을

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 
    } 

합격에 다음 변경하여 루프 :

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

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

보너스

다음은 빠르고 jQuery 데모입니다 : http://jsfiddle.net/U88UQ/