我正在制作面向对象的自动点唱机，但由于某种原因，当我点击它时，我的随机播放按钮无效。它应该从我的歌曲列表中播放一首随机歌曲，但由于某种原因它不起作用。有人可以解释一下我做错了吗？
// defines the Jukebox object
var Juke = function(songList) {
// the code for what happens when you create a Jukebox object
// goes here
//sets list of songs by a tag elements in html
//initialize songNumber to 0
//initialize currentSong to the songList's songnumber
//initialize timeinsong to 0
this.songList = document.getElementById('playlist').getElementsByTagName('A'),
// the code for playing a song would go here
this.songNumber = 0,
this.currentSong = this.songList[this.songNumber],
this.timeInSong = 0,
//function to play jukebox
this.play = function() {
// if pl
if (document.getElementById('play').classList.contains('fa-play-circle-o')) {
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
document.getElementById('play').classList.remove('fa-play-circle-o');
document.getElementById('play').classList.add('fa-pause-circle-o');
document.getElementById('player').currentTime = this.timeInSong;
var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(0deg); -webkit-transition: -webkit-transform 2s ease;'; //
document.getElementById('vinyl').setAttribute('style', css)
document.getElementById('player').play();
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
} else {
this.timeInSong = document.getElementById('player').currentTime
document.getElementById('player').pause();
document.getElementById('play').classList.remove('fa-pause-circle-o');
document.getElementById('play').classList.add('fa-play-circle-o');
}
},
this.next = function() {
// creates a new Jukebox object method
// this play the next song in the array and removes the li class and adds to the next element in the array
document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight')
this.songNumber++;
//incrementing song number by one
if (this.songNumber == this.songList.length) {
// if the song number is equal to the last element in the arrary start from 0
this.songNumber = 0;
}
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
// add highlight to li song number
this.currentSong = this.songList[this.songNumber]
//currrent song is equal to this song number
document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
if (document.getElementById('play').classList.contains('fa-pause-circle-o')) {
document.getElementById('player').play();
}
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
// setting title of the song to current song name
},
this.stop = function() {
// time of song is -
this.timeInSong = 0;
document.getElementById('seekbar').setAttribute('value', 0);
// adding pause to the player
document.getElementById('player').pause();
// removing pause class
document.getElementById('play').classList.remove('fa-pause-circle-o');
document.getElementById('play').classList.add('fa-play-circle-o');
},
this.previous = function() {
// removing song number highlight class
document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight');
//decrementing song number by 1
this.songNumber--;
// if song number isless than 0 play the last one
if (this.songNumber <= 0) {
this.songNumber = this.songList.length - 1;
}
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
// adding highlight to current song
this.currentSong = this.songList[this.songNumber]
// current song is this song number
document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
console.log(document.getElementById('player').getAttribute("src"));
document.getElementById('player').play();
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
// song tittle
},
this.addSong = function() {
// method to add song
var ul = document.getElementById('playlist')
// url
var url = document.getElementById('url').value;
var name = document.getElementById('title').value;
//name is equal to title value
if (url != "" && name != "") {
//i furl and name are not empty
var li = document.createElement('li');
// creting new li element
var atag = document.createElement('a');
atag.setAttribute('href', url);
atag.innerHTML = name;
var but = document.createElement('button');
but.innerHTML = "";
but.setAttribute('onclick', "Jukebox.delete(this)");
// appending user value
li.appendChild(atag);
li.appendChild(but).classList.add('delete', 'fa', 'fa-times');
ul.appendChild(li);
document.getElementById('url').value = '';
document.getElementById('title').value = '';
} else {
alert("Error You haven't Filled in A Form Item")
}
},
this.delete = function(n) {
if (document.getElementById('player').src == n.parentNode.getElementsByTagName('a')[0].getAttribute('href')) {
document.getElementById('player').src = '';
document.getElementById('player').pause();
this.next();
}
n.parentNode.parentNode.removeChild(n.parentNode);
this.songList = document.getElementById('playlist').getElementsByTagName('A');
},
this.preparingToFastForward = function() {
document.getElementById('player').currentTime += document.getElementById('player').currentTime + 100 < document.getElementById('player').duration ? 100 : 0;
},
this.backDatAssUp = function() {
document.getElementById('player').currentTime -= document.getElementById('player').currentTime - 100 > 0 ? 100 : 0;
},
this.listener = function() {
document.getElementById('player').addEventListener("timeupdate", function() {
var currentTime = document.getElementById('player').currentTime;
var duration = document.getElementById('player').duration;
if (currentTime / duration != 1) {
document.getElementById('seekbar').setAttribute('value', currentTime / duration);
var deg = document.getElementById('player').currentTime % 2;
deg = Math.floor(deg % 2) > 0 ? 170 : -170;
console.log(deg)
var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(' + deg + 'deg); -webkit-transition: -webkit-transform 2s ease;';
document.getElementById('vinyl').setAttribute('style', css)
} else {
Jukebox.next();
}
});
}
}
this.random = function() {
var randomIndex = Math.floor(this.songList.length * Math.random());
this.currentSong = randomIndex;
randomIndex.play();
}
function setVolume() {
var mediaClip = document.getElementById("player");
mediaClip.volume = document.getElementById("volume1").value;
}
var Jukebox = new Juke(document.getElementById('playlist'));<body onload="Jukebox.listener()">
<input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='1'>
<div class='container'>
<div class='recordPlayer'>
<img id='vinyl' class='recordPic' src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRpCviLXje4Wve8WwujEm2luErz6VbuoVFkNW785Kxuap6O1Gpt0eXobRk'>
<img class='recPlayer' src="https://c1.staticflickr.com/3/2260/3694333300_37bd1ff316.jpg">
<img class='recArm' src="arm.png">
<div class='controls'>
<span class='titleTitle'>Currently Playing:<span id='songTitle'></span></span><br>
<audio id='player' src='http://www.archive.org/download/bolero_69/Bolero.mp3'>
</audio>
<progress id="seekbar" value="0" max="1"></progress><br>
<button id='back' class='fa fa-backward' onclick="Jukebox.backDatAssUp()"></button>
<button id='play' class='fa fa-play-circle-o' onclick="Jukebox.play()"></button>
<button id='stop' class='fa fa-stop-circle-o' onclick="Jukebox.stop()"></button>
<button id='previous' class='fa fa-step-backward' onclick="Jukebox.previous()"></button>
<button id='next' class='fa fa-step-forward' onclick="Jukebox.next()"></button>
<button id='back' class='fa fa-forward' onclick="Jukebox.preparingToFastForward()"></button>
<button id='random' onclick="Jukebox.random()"> Rnadom song</button>
</div>
</div>
<div class='listOsongs'>
<ol id="playlist">
<h4>Up Next</h4>
<li>
<a id="song" href="http://www.archive.org/download/bolero_69/Bolero.mp3">
Ravel Bolero
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">
Moonlight Sonata - Beethoven
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="https://cf-media.sndcdn.com/MzhGaP8pde4q.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vTXpoR2FQOHBkZTRxLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODI2Mzh9fX1dfQ__&Signature=SyWy~ghuKuTgWmoMWvnGgA~HArGVxjKkiD61UUENA4Ke-aUgivz4ANDUmNW68-AOE-o-7X~MYn8ObL4AonSuVsPz3LbGPQcmxD-3N14qpCFEx3F4zwZh43v1-aDzlypCRtY6IaEzun9NksxbABrqqL~BokIKSH0U6yxJmEmKq98e8PrUO24IcDHiSZZlviYI-bRRtdsFXxM1bxbYh-s32Rkoihj~uxTOGVDwAADwexg5VT2Z8xAuMj2NJ9vMCYkydhmZGOG4G~SQ3lZE3ODyEtD5Vf6myOMGjhWIq9qss~u6eHJbrQ2AB~oon-44WIqEknjWT63NP-O-WyHCBmAf4w__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="https://cf-media.sndcdn.com/zYh4wOY76Fez.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20velloNHdPWTc2RmV6LjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODMzMzN9fX1dfQ__&Signature=nIZ6247SDTQ5LY5pGrdvJkxi3wektW8Kp2uRxOlCg3TthYAq6FeYiu0TJJEdQNNPF8y5WCvbJUi4G553RMwn5xLpxkZR0s0f6B0Fw4m~T18zvic1YH~kRxRVy1ropC2NPax4aI9yCWdKpgFmPNKz21lhFIXoa9F6hnIHaQT0jdFv9eNnjv8CN024j5RnfbFaT1vSzu0AnguXqMlm4uJS8XD~XOT1Y62X4qHzCp685Ahf~Lm9LyhECBXK3nrVF~3QIsxwdYp73Epui29eZsd~7LVCeLwQabU4kvXL9ntTZFft9-JiqLZH4pkmWmSTWlN3Dw~c8dVlZQihruYa81qVPg__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
</ol>
答案 0 :(得分：1)
您遇到的主要问题是您在random构造函数之外定义了Juke函数。现在出现了一个不同的错误，你尝试在一个数字上调用play方法 - 但我不知道你在那里做了什么。
// defines the Jukebox object
var Juke = function(songList) {
// the code for what happens when you create a Jukebox object
// goes here
//sets list of songs by a tag elements in html
//initialize songNumber to 0
//initialize currentSong to the songList's songnumber
//initialize timeinsong to 0
this.songList = document.getElementById('playlist').getElementsByTagName('A'),
// the code for playing a song would go here
this.songNumber = 0,
this.currentSong = this.songList[this.songNumber],
this.timeInSong = 0,
//function to play jukebox
this.play = function() {
// if pl
if (document.getElementById('play').classList.contains('fa-play-circle-o')) {
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
document.getElementById('play').classList.remove('fa-play-circle-o');
document.getElementById('play').classList.add('fa-pause-circle-o');
document.getElementById('player').currentTime = this.timeInSong;
var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(0deg); -webkit-transition: -webkit-transform 2s ease;'; //
document.getElementById('vinyl').setAttribute('style', css)
document.getElementById('player').play();
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
} else {
this.timeInSong = document.getElementById('player').currentTime
document.getElementById('player').pause();
document.getElementById('play').classList.remove('fa-pause-circle-o');
document.getElementById('play').classList.add('fa-play-circle-o');
}
},
this.next = function() {
// creates a new Jukebox object method
// this play the next song in the array and removes the li class and adds to the next element in the array
document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight')
this.songNumber++;
//incrementing song number by one
if (this.songNumber == this.songList.length) {
// if the song number is equal to the last element in the arrary start from 0
this.songNumber = 0;
}
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
// add highlight to li song number
this.currentSong = this.songList[this.songNumber]
//currrent song is equal to this song number
document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
if (document.getElementById('play').classList.contains('fa-pause-circle-o')) {
document.getElementById('player').play();
}
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
// setting title of the song to current song name
},
this.stop = function() {
// time of song is -
this.timeInSong = 0;
document.getElementById('seekbar').setAttribute('value', 0);
// adding pause to the player
document.getElementById('player').pause();
// removing pause class
document.getElementById('play').classList.remove('fa-pause-circle-o');
document.getElementById('play').classList.add('fa-play-circle-o');
},
this.previous = function() {
// removing song number highlight class
document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight');
//decrementing song number by 1
this.songNumber--;
// if song number isless than 0 play the last one
if (this.songNumber <= 0) {
this.songNumber = this.songList.length - 1;
}
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
// adding highlight to current song
this.currentSong = this.songList[this.songNumber]
// current song is this song number
document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
console.log(document.getElementById('player').getAttribute("src"));
document.getElementById('player').play();
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
// song tittle
},
this.addSong = function() {
// method to add song
var ul = document.getElementById('playlist')
// url
var url = document.getElementById('url').value;
var name = document.getElementById('title').value;
//name is equal to title value
if (url != "" && name != "") {
//i furl and name are not empty
var li = document.createElement('li');
// creting new li element
var atag = document.createElement('a');
atag.setAttribute('href', url);
atag.innerHTML = name;
var but = document.createElement('button');
but.innerHTML = "";
but.setAttribute('onclick', "Jukebox.delete(this)");
// appending user value
li.appendChild(atag);
li.appendChild(but).classList.add('delete', 'fa', 'fa-times');
ul.appendChild(li);
document.getElementById('url').value = '';
document.getElementById('title').value = '';
} else {
alert("Error You haven't Filled in A Form Item")
}
},
this.delete = function(n) {
if (document.getElementById('player').src == n.parentNode.getElementsByTagName('a')[0].getAttribute('href')) {
document.getElementById('player').src = '';
document.getElementById('player').pause();
this.next();
}
n.parentNode.parentNode.removeChild(n.parentNode);
this.songList = document.getElementById('playlist').getElementsByTagName('A');
},
this.preparingToFastForward = function() {
document.getElementById('player').currentTime += document.getElementById('player').currentTime + 100 < document.getElementById('player').duration ? 100 : 0;
},
this.backDatAssUp = function() {
document.getElementById('player').currentTime -= document.getElementById('player').currentTime - 100 > 0 ? 100 : 0;
},
this.listener = function() {
document.getElementById('player').addEventListener("timeupdate", function() {
var currentTime = document.getElementById('player').currentTime;
var duration = document.getElementById('player').duration;
if (currentTime / duration != 1) {
document.getElementById('seekbar').setAttribute('value', currentTime / duration);
var deg = document.getElementById('player').currentTime % 2;
deg = Math.floor(deg % 2) > 0 ? 170 : -170;
console.log(deg)
var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(' + deg + 'deg); -webkit-transition: -webkit-transform 2s ease;';
document.getElementById('vinyl').setAttribute('style', css)
} else {
Jukebox.next();
}
});
}
this.random = function() {
var randomIndex = Math.floor(this.songList.length * Math.random());
this.currentSong = randomIndex;
randomIndex.play();
}
}
function setVolume() {
var mediaClip = document.getElementById("player");
mediaClip.volume = document.getElementById("volume1").value;
}
var Jukebox = new Juke(document.getElementById('playlist'));<body onload="Jukebox.listener()">
<input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='1'>
<div class='container'>
<div class='recordPlayer'>
<img id='vinyl' class='recordPic' src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRpCviLXje4Wve8WwujEm2luErz6VbuoVFkNW785Kxuap6O1Gpt0eXobRk'>
<img class='recPlayer' src="https://c1.staticflickr.com/3/2260/3694333300_37bd1ff316.jpg">
<img class='recArm' src="arm.png">
<div class='controls'>
<span class='titleTitle'>Currently Playing:<span id='songTitle'></span></span><br>
<audio id='player' src='http://www.archive.org/download/bolero_69/Bolero.mp3'>
</audio>
<progress id="seekbar" value="0" max="1"></progress><br>
<button id='back' class='fa fa-backward' onclick="Jukebox.backDatAssUp()"></button>
<button id='play' class='fa fa-play-circle-o' onclick="Jukebox.play()"></button>
<button id='stop' class='fa fa-stop-circle-o' onclick="Jukebox.stop()"></button>
<button id='previous' class='fa fa-step-backward' onclick="Jukebox.previous()"></button>
<button id='next' class='fa fa-step-forward' onclick="Jukebox.next()"></button>
<button id='back' class='fa fa-forward' onclick="Jukebox.preparingToFastForward()"></button>
<button id='random' onclick="Jukebox.random()"> Rnadom song</button>
</div>
</div>
<div class='listOsongs'>
<ol id="playlist">
<h4>Up Next</h4>
<li>
<a id="song" href="http://www.archive.org/download/bolero_69/Bolero.mp3">
Ravel Bolero
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">
Moonlight Sonata - Beethoven
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="https://cf-media.sndcdn.com/MzhGaP8pde4q.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vTXpoR2FQOHBkZTRxLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODI2Mzh9fX1dfQ__&Signature=SyWy~ghuKuTgWmoMWvnGgA~HArGVxjKkiD61UUENA4Ke-aUgivz4ANDUmNW68-AOE-o-7X~MYn8ObL4AonSuVsPz3LbGPQcmxD-3N14qpCFEx3F4zwZh43v1-aDzlypCRtY6IaEzun9NksxbABrqqL~BokIKSH0U6yxJmEmKq98e8PrUO24IcDHiSZZlviYI-bRRtdsFXxM1bxbYh-s32Rkoihj~uxTOGVDwAADwexg5VT2Z8xAuMj2NJ9vMCYkydhmZGOG4G~SQ3lZE3ODyEtD5Vf6myOMGjhWIq9qss~u6eHJbrQ2AB~oon-44WIqEknjWT63NP-O-WyHCBmAf4w__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="https://cf-media.sndcdn.com/zYh4wOY76Fez.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20velloNHdPWTc2RmV6LjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODMzMzN9fX1dfQ__&Signature=nIZ6247SDTQ5LY5pGrdvJkxi3wektW8Kp2uRxOlCg3TthYAq6FeYiu0TJJEdQNNPF8y5WCvbJUi4G553RMwn5xLpxkZR0s0f6B0Fw4m~T18zvic1YH~kRxRVy1ropC2NPax4aI9yCWdKpgFmPNKz21lhFIXoa9F6hnIHaQT0jdFv9eNnjv8CN024j5RnfbFaT1vSzu0AnguXqMlm4uJS8XD~XOT1Y62X4qHzCp685Ahf~Lm9LyhECBXK3nrVF~3QIsxwdYp73Epui29eZsd~7LVCeLwQabU4kvXL9ntTZFft9-JiqLZH4pkmWmSTWlN3Dw~c8dVlZQihruYa81qVPg__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
</ol>