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
Bibek Ghimire
261 PointsThis wont work...
<!DOCTYPE html> <html> <head> <title>My Playlist</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body>
<div>
<h1>My Playlist</h1>
<ol id="playlist">
</ol>
<button id="play">Play</button>
<button id="next">Next</button>
<button id="stop">Stop</button>
</div>
<script src="song.js"></script>
<script src="playlist.js"></script>
<script src="app.js"></script>
</body> </html>
song.js 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() { var htmlString= '<li '; if(this.isPlaying){ htmlString+= 'class="current"'; } htmlString+= '>'; htmlString+= this.title; htmlString+= ' - '; htmlString+= '<span calss="duration">' htmlString+= this.duration; htmlString+= '</span></li>';
return htmlString;
};
playlist.js function Playlist(){ this.songs= []; //Take an empty array...for new Playlist... this.nowPlayingIndex=0; }
Playlist.prototype.add=function(){ this.songs.push(Song); //Push song to songs playlist... }; Playlist.prototype.play=function(){ var currentSong=this.songs[nowPlayingIndex]; currentSong.play(); }; Playlist.prototype.next=function(){ this.stop(); this.nowPlayingIndex++; if(this.nowPlayingIndex===this.songs.length){ this.nowPlayingIndex=0; } this.play(); }; Playlist.prototype.stop=function(){ var currentSong=this.songs[nowPlayingIndex]; currentSong.stop(); };
/* Display the Playlist to Page / Playlist.prototype.renderInElement = function(list){ list.innerHTML=""; / First Empty Playlist / / Loop to add songs */ for(var i=0;i<this.songs.length;i++){ list.innerHTML+= this.songs[i].toHTML; } } };
app.js var playlist=new Playlist();
var hereComesTheSun=new Song('Here Comes The Sun','The Beatles','2:54'); var walkingOnTheSunshine=new Song('Walking On The Sunshine','Katrina and the Waves','3:43');
playlist.add(hereComesTheSun); playlist.add(walkingOnTheSunshine);
/* Get Playlist Id */ var playlistElement= document.getElementById("playlist");
/*For displaying to Page */ playlist.renderInElement (playlistElement);
var playButton=document.getElementById("play"); playButton.onclick=function(){ playlist.play(); /* To Refresh UI */ playlist.renderInElement (playlistElement); } var stopButton=document.getElementById("stop"); stopButton.onclick=function(){ playlist.stop(); playlist.renderInElement (playlistElement); } var nextButton=document.getElementById("next"); nextButton.onclick=function(){ playlist.next(); playlist.renderInElement (playlistElement); }
Cameron O'Brien
11,564 PointsIt looks like the issue could be in your playlist.js file. In the renderInElement when you are looping through this.songs.length and add to the list.innerHTML, after this.songs[i].toHTML you should have an opening and closing parentheses, since it is calling the toHTML method inside of songs.js
Steven Parker
231,269 PointsSteven Parker
231,269 PointsUse the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area.
Or watch this video on code formatting.
And please elaborate a bit on the nature of the issue. "This won't work" is a bit vague.