Question

addEventListener在＆＃34; var playbutton＆＃34;上运行不正常。一部分。我做错了什么？

当我在控制台中运行playlist.prototype.play函数时。该代码运行但我似乎无法将其绑定到HTML按钮。

function mediaPlayer(title, artist){
    this.title = title;
    this.artist = artist;
}

var songOne = new Audio('media/song_1.mp3');
var songTwo = new Audio('media/song_2.mp3');
var songThree = new Audio('media/song_3.mp3');
var songFour = new Audio('media/song_4.mp3');
var songFive = new Audio('media/song_5.mp3');

mediaPlayer.prototype = Object.create(playlist.prototype);

function playlist(){
    this.mediaList = [songOne, songTwo, songThree, songFour, songFive];
    this.nowPlayingIndex = 0;
}

function viewPlaylist(){
    playlist.call(this);
    for(var i = 0; i < mediaList.length; i++){
        console.log(mediaList[i]);
    }
}


playlist.prototype.play = function(){
    var currentMedia = this.mediaList[this.nowPlayingIndex];
    console.log(currentMedia);
    currentMedia.play();

}

var playButton = document.getElementById("playButton");
    playButton.addEventListener('click', function(){
    currentMedia.play();
    document.getElementById("nowPlayingSpan").innerHTML = currentMedia;
    document.getElementById("upNextSpan").innerHTML = currentMedia[1];
}) ;

playlist.prototype.pause = function(){
    var currentMedia = this.mediaList[this.nowPlayingIndex];
    currentMedia.pause();
}

var pauseButton = document.getElementById("pauseButton");
    pauseButton.addEventListener('click', function(){
    currentMedia.pause();   
}) ;

Answer 1

由于cuurrentMedia范围内addEventListener未声明，因此您应将cuurrentMedia替换为playlist.mediaList[playlist.nowPlayingIndex]

Answer 2

您在函数内定义currentMedia，它只属于该函数（当前媒体的范围是函数。）。

playlist.prototype.play = function(){
    *var currentMedia* = this.mediaList[this.nowPlayingIndex];
    console.log(currentMedia);
    currentMedia.play();

}

将其单独定义为全局变量，并在函数内指定值。

var currentMedia = {};
playlist.prototype.play = function(){
    currentMedia = this.mediaList[this.nowPlayingIndex];
    console.log(currentMedia);
    currentMedia.play();
}

addEventListener没有在javascript中响应

2 个答案: