[英]How do I attach eventlisteners to an array of html elements and parse data attributes as arguments in javascript?
I am building a custom audio player in Javascript, but I have trouble attaching an event listener to each song in the list. 我正在用Javascript构建自定义音频播放器,但是在将事件侦听器附加到列表中的每首歌曲时遇到了麻烦。 When I click on a track in the playlist, I want to parse a data attribute through a function called selectTrack(x) to tell the player which song to play.
当我单击播放列表中的曲目时,我想通过一个名为selectTrack(x)的函数解析数据属性,以告诉播放器播放哪首歌。 However, I keep getting an error saying that this function is not defined.
但是,我不断收到错误消息,指出未定义此函数。
This is is the part I have trouble with: 这是我遇到的问题:
// 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);
});
}
The full code is posted below. 完整的代码发布在下面。
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>
Couple of things: 几件事情:
for
loop: mylistener
should be myListener
(capitalised L ) for
循环内的第二行: mylistener
应该是myListener
(大写的L ) selectTrack
is inside initBeatPlayer
, hence not available publicly. selectTrack
在initBeatPlayer
内部,因此不公开。 However, given that selectTrack
needs to refer to other vars inside initBeatPlayer
as well, it's probably better to move your handler-binding work inside initBeatPlayer
as well. selectTrack
需要引用initBeatPlayer
内的其他变量,最好将处理程序绑定工作也initBeatPlayer
内。 Here is a "working" jsFiddle, you still need to clean up other parts beside that snippet: https://jsfiddle.net/bosjuLmo/1/ 这是一个“有效”的jsFiddle,您仍然需要清理该代码段之外的其他部分: https ://jsfiddle.net/bosjuLmo/1/
You need to declare all your variables, listeners at the top of the script; 您需要在脚本顶部声明所有变量,即侦听器。 this way you know every element is defined when functions need them.
这样,您就知道在功能需要它们时定义了每个元素。 Same thing for functions, better write them before the calls.
函数也是一样,最好在调用之前将它们编写。
Keep in mind that variables declared with 'var' inside a function, are representative in a local scope. 请记住,在函数内部用“ var”声明的变量在局部范围内具有代表性。 'var dir' in a global scope is not the same as 'var dir' inside a function, JS will treat them as separate things.
全局范围内的“ var dir”与函数内的“ var dir”不同,JS会将它们视为独立的事物。
Hope this helps, it's working OK: 希望这会有所帮助,可以正常运行:
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);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.