Songs not being rendered

I have been looking at my code for hours and still can not figure out why the songs aren't even appearing.

Here is my songs.js file:

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() { //back to UI later var htmlString = '<li'; if(this.isPlaying === true){ var htmlString += ' class="current"'; } var htmlString += '>'; var htmlString += this.title; var htmlString += ' - '; var htmlString += this.artist var htmlString += '<span class="duration">'; var htmlString += this.duration; var htmlString += '</span></li>';

return htmlString;

};

Here is playlist.js:

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

}

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

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

Playlist.prototype.stop = function(){ var 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(var i = 0; i < this.songs.length; i++) { list.innerHTML += this.songs[i].toHTML(); } };

And here is apps.js:

var playList = new Playlist();

var hesGone = new Song("He's Gone", "the Grateful Dead", "4:45"); var cassidy = new Song("Cassidy", "Big Dill and the Boys", "4:10");

playList.add(hesGone); playList.add(cassidy);

var 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); }