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!

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

JavaScript Object-Oriented JavaScript (2015) Constructor Functions and Prototypes Making the UI Work

Grace Li
Grace Li
15,905 Points

"Play" button add songs to the list instead of highlighting it pink. "Next" and "Stop" buttons are not working.

I'm not sure what's wrong. The followings are my codes. I have 4 separate code. This is my first time posting a question, so I'm not exactly sure how to post these codes.

  1. index.html

    <div> <h1>Grace's Tunes</h1>

    <ol id="playlist">
    <button id="play">Play</button>
    <button id="next">Next</button>
    <button id="stop">Stop</button>


    <script src="playlist.js"></script> <script src="song.js"></script> <script src="app.js"></script>

  2. app.js

var playlist = new Playlist();

var myHeartWillGoOn = new Song("My Heart Will Go On", "Celine Dion", "2:54"); var stars = new Song("Stars", "Jay Chou", "3:31");

playlist.add(myHeartWillGoOn); playlist.add(stars);

var playlistElement = document.getElementById("playlist");


var playButton = document.getElementById("play"); playButton.onclick = function() { playlist.play(); playlist.renderInElement(playlistElement); }

var nextButton = document.getElementById("next"); nextButton.onclick = function() { playlist.next(); var playlistElement = document.getElementById('playlist'); }

var stopButton = document.getElementById("stop"); stopButton.onclick = function() { playlist.stop(); var playlistElement = document.getElementById('playlist'); }

  1. song.js

function Song(title, artist, duration) { this.title = title; this.artist = artist; this.duration = duration; this.isPlaying = false; }

Song.prototype.play = function() { this.isPlyaing = 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 += this.artist; htmlString += '<span class="duuration">'; htmlString += this.duration; htmlString += '</span></li>'; return htmlString; };

  1. playlist.js

function Playlist() { this.songs = [ ]; this.nowPlayIndex = 0; }

Playlist.prototype.add = function(song) { this.songs.push(song); };

Playlist.prototype.play = function() { var currentSong = this.songs[this.nowPlayIndex]; currentSong.play(); };

Playlist.prototype.stop = function(){ var currentSong = this.songs[this.nowPlayIndex]; currentSong.stop(); };

Playlist.prototype.next = function() { this.stop(); this.nowPlayIndex++; if(this.nowPlayIndex === this.songs.length) { this.nowPlayIndex = 0; } this.play(); };

Playlist.prototype.renderInElement = function(list) { list.innerHtml = ""; for(var i = 0; i < this.songs.length; i++) { list.innerHTML += this.songs[i].toHTML(); } };

1 Answer

Zachary Hale
Zachary Hale
Courses Plus Student 10,946 Points

Okay, so I copied your code into workspaces and I've figured most of it out.

Most of your problems are syntax errors. You MUST remember that in programming 'innerHTML' and 'innerHtml' (innerHtml doesn't exist) are not the same thing....everything is case sensitive.

Why it just keeps adding songs

 Playlist.prototype.renderInElement = function(list) { 
    list.innerHTML = ""; //Your original method here was innerHtml and should be innerHTML
    for(var i = 0; i < this.songs.length; i++) { 
        list.innerHTML += this.songs[i].toHTML(); 

Another spelling error, I think this had to do with not adding the class "current" because isPlaying wasn't true due to a spelling error.

Song.prototype.play = function() { this.isPlaying = true; }; // You originally had isPlyaing... which doesn't work :)
Song.prototype.stop = function() { this.isPlaying = false; };

The next now works but I can't remember if it should update the UI when you hit Play / Stop / Next. Anyways, that's on the right track!! Maybe I'll come back later and show the updating UI with it.

Grace Li
Grace Li
15,905 Points

Thanks so much Zachary. I followed what you said and also re-watch the videos, and I figure out what I did wrong.