Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial

Carlos Lantigua
5,938 PointsButtons work until I use the "next" button to play the next song
First song plays and stops fine, once I hit the next button it switches to the next song.. once I try anything else however while in the second song I get the following error message: Uncaught TypeError: Cannot read property 'play' of undefined at Playlist.play (app.js:45) at Playlist.next (app.js:59) at HTMLButtonElement.nextButton.onclick (app.js:90)
/////////////////////////////////Songs
function Song(title, artist, duration) {
this.title = title;
this.artist = artist;
this.duration = duration;
this.isPlaying = false;
}
Song.prototype.play = function() {
this.isPlaying = true;
};
Song.prototype.stop = function() {
this.isPlaying = false;
};
Song.prototype.toHTML = function() {
let htmlString = '<li'
if (this.isPlaying) {
htmlString += 'class="current"'
};
htmlString += '>'
htmlString += this.title;
htmlString += '-';
htmlString += this.artist;
htmlString += '<span class="duration">'
htmlString += this.duration;
htmlString += '</span></li>';
return htmlString;
};
///////////////////////////////////PlayList
function Playlist() {
this.songs = [];
this.nowPlayingIndex = 0;
}
Playlist.prototype.add = function(song) {
this.songs.push(song);
};
Playlist.prototype.play = function() {
let currentSong = this.songs[this.nowPlayingIndex];
currentSong.play();
};
Playlist.prototype.stop = function() {
let currentSong = this.songs[this.nowPlayingIndex];
currentSong.stop();
};
Playlist.prototype.next = function() {
this.stop();
this.nowPlayingIndex++;
if (this.nowPlayingIndex === this.songs.length) {
this.nowPlayingIndex === 0;
}
this.play();
};
Playlist.prototype.renderInElement = function(list) {
list.innerHTML = " ";
for (let i = 0; i < this.songs.length; i++) {
list.innerHTML += this.songs[i].toHTML();
}
};
//////////////////////////////App
let playlist = new Playlist();
let hereComesTheSun = new Song("Here Comes the Sun", "The Beatles", "2:54");
let walkingOnSunshine = new Song("Walking on Sunshine", "Katrina and the Waves", "3:43");
playlist.add(hereComesTheSun);
playlist.add(walkingOnSunshine);
let playlistElement = document.getElementById("playlist");
playlist.renderInElement(playlistElement);
var playButton = document.getElementById('play');
playButton.onclick = function() {
playlist.play();
playlist.renderInElement(playlistElement);
}
var nextButton = document.getElementById('next');
nextButton.onclick = function() {
playlist.next();
playlist.renderInElement(playlistElement);
}
var stopButton = document.getElementById('stop');
stopButton.onclick = function() {
playlist.stop();
playlist.renderInElement(playlistElement);
}
1 Answer

Neil McPartlin
14,662 PointsHi Carlos.
1: playlist.js line 24.
The idea of this 'if statement', within the 'next' function, is to check to see if we have reached the bottom of the song list and if so, reset the NowPlayingIndex back to 0, in order to highlight the first entry again. By mistake you are actually performing a comparison this.nowPlayingIndex === 0
whereas instead, you need to assign 0 to nowPlayingIndex like so this.nowPlayingIndex = 0
So (for me), the next button now works but I note the 'Play' highlighting is not correct. Instead the song's text becomes center justified.
2: song.js line 19.
In this function, we are building up the html string, and on this line, a crucial character space is missing. Instead of a string comprising... <li class='current', we get <liclass='current' which naturally baffles the browser. So to fix this, edit this line like so... htmlString += ' class="current"';
, this introduces the required space before the c of class.