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

Shazad Kazi
Shazad Kazi
10,758 Points
Posted by Shazad Kazi
Shazad Kazi
10,758 Points

Not populating the playlist. Attached Snapshot

I've followed the course, the only difference is is that I have changed the names of the songs to test it out. Everything is there but I just cant get it to populate.

https://w.trhou.se/d0cy9tbtk2

Side Question Why do we use this bit of code after every button click

playlist.renderInElement(playlistElement);

From my notes, I wrote "each method alters the state of the object, we need to refresh the whole UI" but I am having trouble understanding why this is the case. So would be eternally grateful if you could shed some light on that.

5 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

:point_right: I noticed a couple of issues:

  • In song.js, on line 27 you are missing the closing quote.
  • In playlist.js, on line 23 you have a syntax error resembling a cross between an if and a for statement.

When you fix both of those, your list should appear.

Shazad Kazi
Shazad Kazi
10,758 Points
Shazad Kazi
Shazad Kazi
10,758 Points

Thanks Steven,

there was few other mistakes which I've edited: https://w.trhou.se/isvqopvq9p

It was working perfectly now. Appreciate all the help. Do you by chance know how to answer the last part of my initial question.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The list of songs is maintained in the memory, but is not directly related to what you see on the page. When you call the renderInElement method, it builds HTML using the list and puts that HTML into the document element. This causes the page to show the current list.

If you didn't call this function after making a change, the page would continue to show the way the list was before the change.

Shazad Kazi
Shazad Kazi
10,758 Points
Shazad Kazi
Shazad Kazi
10,758 Points 
  htmlString += " - ";

Would have assumed that is correct?

I have added the closing ; on line 25 and 27 but still nothing seems to be populating.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I revised my answer, the line missing the quote is 27:

  htmlString += "</span></li>

:information_source: Semicolons at the end of a line are optional (but good practice).

Shazad Kazi
Shazad Kazi
10,758 Points
Shazad Kazi
Shazad Kazi
10,758 Points 
 if(this.nowPlayIndex === this.songs.length; i++){
      this.nowPlayIndex = 0;
      };

added the closing bracket to that

and have added the closing " to 

  htmlString += "</span></li>

Thank you Steven appreciate the help... There still appears to be nothing happening

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

It's not just the bracket .. you also have what looks like the increment part of a for statement in there:

 if(this.nowPlayIndex === this.songs.length; i++){

I think what you meant was this:

 if (this.nowPlayIndex === this.songs.length) {
Shazad Kazi
Shazad Kazi
10,758 Points
Shazad Kazi
Shazad Kazi
10,758 Points

Steven, you legend, I actually get it. I wish I could virtually buy you a pint.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I'm happy to help.     :beer: And enjoying my virtual reward.