如何将eventlisteners附加到html元素数组，并将数据属性解析为javascript中的参数？

我正在用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);

  });
}

>
puntlandtvradio.net音乐-用于教育目的

两件事：

循环的
内的第二行：
mylistener
应该是
mylistener
（大写L）

事件侦听器中的datavalue未定义，请先声明它

正如前面的评论所指出的，

selectTrack

位于

initBeatPlayer

内，因此不可公开使用。但是，鉴于

selectTrack

还需要引用

initBeatPlayer

中的其他变量，因此最好将处理程序绑定工作也移动到

initBeatPlayer

中

这是一个“正在工作”的JSFIDLE，您仍然需要清理该代码段旁边的其他部分：

---

您需要在脚本顶部声明所有变量、侦听器；这样，您就知道每个元素都是在函数需要时定义的。函数也是一样，最好在调用之前编写它们

请记住，在函数中用“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);

  });
}

var trackListContainer、playPrevBtn、playPauseBtn、PlayNextBtn；
var trackRow，songArray；
songArray=[“Aminaiyoamore”，“adg3com_chuckedknuckles”]；
var myListener=document.getElementById（“trackListContainer”）；
var dir=''；
var-ext=''；
变量playPrevBtn、playPauseBtn、playNextBtn；
playPrevBtn=document.getElementById（“playPrevBtn”）；
playPauseBtn=document.getElementById（“playPauseBtn”）；
playNextBtn=document.getElementById（“playNextBtn”）；
addEventListener（“加载”，initBeatPlayer）；
//功能
函数selectTrack（数据值）{
播放列表\数组\索引=数据值
audio.src=dir+songArray[playlist\u array\u index]+ext；
音频播放（）；
}
函数playPause（）{
如果（音频暂停）{
音频播放（）；
document.getElementById（“playPauseBtn”）.textContent=“PAUSE”；
}否则{
audio.pause（）
document.getElementById（“playPauseBtn”）.textContent=“播放”
}
}
函数seekBackward（）{
如果（playlist\u array\u index你能缩小这段代码吗？问题是它的一半看起来没有必要。函数没有在你试图使用它的范围内定义。
selectTrack
是在
initBeatPlayer
中定义的，所以如果你想在
initBeatPlayer
之外使用它，就把它移到外面。更新了。我发布了一段t他编写了这个问题的代码。谢谢你的解决方案。这些公共变量会导致内存泄漏或诸如此类的问题吗？在这种情况下，公共变量是件坏事吗？@RonaldThompson一对全局变量在内存方面不是什么大问题，但可能还有其他问题。这篇文章读得不错：