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

Nadeem Ahmed
Nadeem Ahmed
10,125 Points
Posted by Nadeem Ahmed
Nadeem Ahmed
10,125 Points

RenderinELement

What is the purpose of this function and why did he use it right at the end?

Ivana Lescesen
Ivana Lescesen
19,442 Points
Ivana Lescesen
Ivana Lescesen
19,442 Points 
          Playlist.prototype.renderInElement = function(list) {
  list.innerHTML = "";
  for(var i = 0; i < this.songs.length; i++) {
    list.innerHTML += this.songs[i].toHTML();
  }
};
          ```

3 Answers

Alan Kolić
Alan Kolić
8,384 Points
Alan Kolić
Alan Kolić
8,384 Points

Playlist object has an array named songs which stores all of the songs that will be displayed on the web page. Song object has a function toHTML which collects all the needed information about the song and outputs it in HTML format.

Inside the app.js file you add two songs to the songs array using playlist.add function.

Now you can loop through the songs array using the code you listed above and at the same time transform it HTML format using toHTML function.

I hope this helped.

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

Nadeem, It might be better if you post the code associated with the question.

Justin Hicks
Justin Hicks
14,290 Points
Justin Hicks
Justin Hicks
14,290 Points

I had a little trouble following this as well, but through reading others questions it has cleared it up some for me. One thing that caused me a little problem was the var playlist = new Playlist(); I completely understand that and what its doing. What was messing me up was playlist with lowercase p then Playlist(); uppercase P. Figured I'd share my thougths.

Anaet Hossain
Anaet Hossain
13,153 Points
Anaet Hossain
Anaet Hossain
13,153 Points

Hi Justin, It's really confusing. Here playlist is instance object and Playlist() is constructor function. Using first letter UpperCase in constructor function is best practice and also it help to better understand that it's a constructor function.