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

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

Martina Vonkomerova
Martina Vonkomerova
7,790 Points

Items are not showing 2

Due to some reason, the html content in songs items is not showing up. The code follows:

//Playlist

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

}

Playlist.prototype.add = function(song) {
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();
  }
};




//Song

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 +='>' + this.title + ' - ' + this.artist + '<span class="duration">' + this.duration + '</span></li>';
    return htmlString;
};

//App

var playlist = new Playlist();


var herecomeourson= new Song("Here come our son","The Beatles", "2:54");
var song2 = new Song("Song2","Blur", "3:04");

playlist.add(herecomeourson);
playlist.add(song2);  

var playListElement= document.getElementById("playlist");
playlist.renderInElement(playListElement);

Can somebody help me , please? Thanks in advance.

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

}

Playlist.prototype.add = function(song) { 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(); } }; //Song 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 = ';

if(this.isPlaying) {
    htmlString += ' class="current"';
}
htmlString +='>' + this.title + ' - ' + this.artist + '<span class="duration">' + this.duration + '</span></li>';
return htmlString;
}; //App var playlist = new Playlist();

var herecomeourson= new Song("Here come our son","The Beatles", "2:54"); var song2 = new Song("Song2","Blur", "3:04");

playlist.add(herecomeourson); playlist.add(song2);

var playListElement= document.getElementById("playlist"); playlist.renderInElement(playListElement);

Is this how your code looks? If so, there are quite bit of errors

24 Answers

Ahhh found it :P

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

You forgot to say this.songs

Martina Vonkomerova
Martina Vonkomerova
7,790 Points

I changed that and it still doesnt work :(

Send me snapshot of workspace and preview again

Martina Vonkomerova
Martina Vonkomerova
7,790 Points

These scripts are in separete js files.

Do you mind editing your code preview in the question?

You can edit your first post by clicking the three dots at the bottom

Martina Vonkomerova
Martina Vonkomerova
7,790 Points

Can you help me out with my errors, please?

Hmmm, your code looks good, I would have to guess that your variable names are not what the challenge wants them to be... whats the error you are getting?

Martina Vonkomerova
Martina Vonkomerova
7,790 Points

The problem is song list is not showing up .

Alright gimme one sec and let me check it out

Well I pasted in your toHTML and renderInElement code and everything worked for me?

Martina Vonkomerova
Martina Vonkomerova
7,790 Points

When try to view with workspace, the content is not displaying.

It worked for me... send me a link to your workspace

Can you send me your workspace too? Like where your code is?

Hmmm, not sure how last guy did it, but he was able to send a link to his workspace so others could view, I cant view this one though...

Martina Vonkomerova, in the console on your preview it shows that your code for Playlist renderInElement looks like this

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

which in this case is not what you showed as your code at top did you make sure to save your workspace?

Yup howd u do that? And also, I was write, your code is not finished, if i edit will it edit for your workspace too?

Cool! So did you see the problem? Your Playlist.prototype.renderInElement function was not complete

Martina Vonkomerova
Martina Vonkomerova
7,790 Points

Can you send me the workspace ? For instance, I can't check the changes

It wont let me change anything :/

This

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

Needs to be this

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

Lol no problem! Took awhile but we got it! Right? Its working now?

Martina Vonkomerova
Martina Vonkomerova
7,790 Points

It was really small detail. Thank you again for finding out!

Lol yes! And no problem