如何將eventlisteners附加到html元素數組並解析數據屬性作為javascript中的參數？

Question

我正在用Javascript構建自定義音頻播放器，但是在將事件偵聽器附加到列表中的每首歌曲時遇到了麻煩。 當我單擊播放列表中的曲目時，我想通過一個名為selectTrack（x）的函數解析數據屬性，以告訴播放器播放哪首歌。 但是，我不斷收到錯誤消息，指出未定義此函數。

這是我遇到的問題：

// attach event listener and get data value from div 
var myListener = document.getElementsByClassName("trackListRow");
for (var i=0; i < myListener.length; i++)
{
  myListener[i].getAttribute("data-track-index");
  mylistener[i].addEventListener("click", function(){

    selectTrack(datavalue);

  });
}

完整的代碼發布在下面。

 var trackListContainer, playPrevBtn, playPauseBtn, PlayNextBtn; var trackRow, songArray; songArray = ["Aminaiyoamoore", "adg3com_chuckedknuckles" ]; // create track list - append to container var i; for (i = 0; i < songArray.length; i++) { trackRow = document.createElement("div"); trackRow.textContent = songArray[i]; trackRow.className = "trackListRow"; // set data attribute to array index number for event handling trackRow.setAttribute("data-track-index", songArray.indexOf(songArray[i])); trackListContainer = document.getElementById("trackListContainer"); trackListContainer.appendChild(trackRow); } // Problems here // attach event listener and get data value from div var myListener = document.getElementsByClassName("trackListRow"); for (var i=0; i < myListener.length; i++) { myListener[i].getAttribute("data-track-index"); mylistener[i].addEventListener("click", function(){ selectTrack(datavalue); }); } var playPrevBtn, playPauseBtn, playNextBtn; playPrevBtn = document.getElementById("playPrevBtn"); playPauseBtn = document.getElementById("playPauseBtn"); playNextBtn = document.getElementById("playNextBtn"); function initBeatPlayer() { // var dir = "audio/"; var dir = "http://www.puntlandtvradio.net/placeholders/audio/" var ext = ".mp3"; playlist_array_index = 0; audio = new Audio(); playPauseBtn.addEventListener("click", playPause); playPrevBtn.addEventListener("click", seekBackward); playNextBtn.addEventListener("click", seekForward); audio.addEventListener("ended", function() { switchTrack() }); // functions function selectTrack(datavalue){ playlist_array_index = datavalue audio.src = dir + songArray[playlist_array_index] + ext; audio.play(); } function playPause() { if (audio.paused) { audio.play(); document.getElementById("playPauseBtn").textContent = "PAUSE"; } else { audio.pause() document.getElementById("playPauseBtn").textContent = "PLAY" } } function seekBackward() { if (playlist_array_index <= 0) { playlist_array_index = 0; audio.src = dir + songArray[playlist_array_index] + ext; audio.pause(); audio.currentTime = 0; audio.play(); } else { playlist_array_index--; audio.src = dir + songArray[playlist_array_index] + ext; audio.play(); } } function seekForward() { if (playlist_array_index == (songArray.length - 1)) { playlist_array_index = 0; } else { playlist_array_index++; audio.src = dir + songArray[playlist_array_index] + ext; audio.play(); } } //end functions } window.addEventListener("load", initBeatPlayer); 

 #container{width: 320px; margin: auto; overflow: hidden;} #controls {} #playPrevBtn, #playPauseBtn, #playNextBtn{ font-size: 25px; margin: 5px;} .trackListRow {font-size: 20px; background-color: aliceblue; color: black; padding: 10px; margin: 5px;} .trackListRow:hover {background: brown; color: white; } 

 <!--player control buttions --> <div id="container"> <div id="trackListContainer"> </div> <div id="controls"> <button id="playPrevBtn"> << </button> <button id="playPauseBtn">PAUSE</button> <button id="playNextBtn">>></button> </div> <div> music by puntlandtvradio.net - for educational purposes </div> </div> 

Answer 1

幾件事情：

1. for循環內的第二行： mylistener應該是myListener （大寫的L ）
2. 未定義事件偵聽器中的數據值，請先聲明它。
3. 就像指出的注釋一樣， selectTrack在initBeatPlayer內部，因此不公開。 但是，考慮到selectTrack需要引用initBeatPlayer內的其他變量，最好將處理程序綁定工作也initBeatPlayer內。

這是一個“有效”的jsFiddle，您仍然需要清理該代碼段之外的其他部分： https ://jsfiddle.net/bosjuLmo/1/

Answer 2

您需要在腳本頂部聲明所有變量，即偵聽器。 這樣，您就知道在功能需要它們時定義了每個元素。 函數也是一樣，最好在調用之前將它們編寫。

請記住，在函數內部用“ var”聲明的變量在局部范圍內具有代表性。 全局范圍內的“ var dir”與函數內的“ var dir”不同，JS會將它們視為獨立的事物。

希望這會有所幫助，可以正常運行：

var trackListContainer, playPrevBtn, playPauseBtn, PlayNextBtn;
var trackRow, songArray;
songArray = ["Aminaiyoamoore", "adg3com_chuckedknuckles" ];
var myListener = document.getElementById("trackListContainer");
var dir='';
var ext='';

var playPrevBtn, playPauseBtn, playNextBtn;
playPrevBtn = document.getElementById("playPrevBtn");
playPauseBtn = document.getElementById("playPauseBtn");
playNextBtn = document.getElementById("playNextBtn");

window.addEventListener("load", initBeatPlayer);

// functions 


  function selectTrack(datavalue){

    playlist_array_index = datavalue
    audio.src = dir + songArray[playlist_array_index] + ext;          
            audio.play();

  }






    function playPause() {
        if (audio.paused) {
            audio.play();
            document.getElementById("playPauseBtn").textContent = "PAUSE";
        } else {
            audio.pause()
            document.getElementById("playPauseBtn").textContent = "PLAY"
        }
    }


    function seekBackward() {
        if (playlist_array_index <= 0) {

            playlist_array_index = 0;
            audio.src = dir + songArray[playlist_array_index] + ext;
            audio.pause();
            audio.currentTime = 0;
            audio.play();
        } else {

            playlist_array_index--;
            audio.src = dir + songArray[playlist_array_index] + ext;
            audio.play();
        }
    }

    function seekForward() {

        if (playlist_array_index == (songArray.length - 1)) {
            playlist_array_index = 0;

        } else {

            playlist_array_index++;
            audio.src = dir + songArray[playlist_array_index] + ext;          
            audio.play();

        }

    }

function initBeatPlayer() {
   // var dir = "audio/";
   dir =  "http://www.puntlandtvradio.net/placeholders/audio/"

    ext = ".mp3";
    playlist_array_index = 0;
    audio = new Audio();


    playPauseBtn.addEventListener("click", playPause);
    playPrevBtn.addEventListener("click", seekBackward);
    playNextBtn.addEventListener("click", seekForward);
    audio.addEventListener("ended", function() {
        switchTrack()
    });
}

//end functions

// create track list - append to container

for (var i = 0; i < songArray.length; i++) {
    trackRow = document.createElement("div");
    trackRow.textContent = songArray[i];
    trackRow.className = "trackListRow";
    // set data attribute to array index number for event handling
    trackRow.setAttribute("data-track-index", songArray.indexOf(songArray[i]));

    trackListContainer = document.getElementById("trackListContainer");
    trackListContainer.appendChild(trackRow);

}  

       //  Problems here
// attach event listener and get data value from div 

for (var i=0; i < myListener.length; i++){
  myListener[i].getAttribute("data-track-index");
  mylistener[i].addEventListener("click", function(){

    selectTrack(datavalue);

  });
}