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

Posted by Grace Ji
Grace Ji
5,402 Points

I don't get why he breaks down class="current"> into 2 "htmlString += "

at 1:05 minutes on the video, on 18, 19th lines, he breaks down class="current"> into 2 'htmlString += ' Why should one class be written separately?
Would anyone can help me?

Grace Ji
Grace Ji
5,402 Points

Ah. I think I got it. He need the class="current" for if(){} method. am I right? :)

2 Answers

Jonathan Rhodes
Jonathan Rhodes
8,086 Points
Jonathan Rhodes
Jonathan Rhodes
8,086 Points

Basically he has an unfinished <li> tag. He wants that tag to take the "current" class only if that item is playing, but for the other items that don't have the "current" class, he needs to finish up the tag.

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

As Jonathan mentioned it's an unfinished <li> tag which he keeps adding to it, mainly because the "current" class should be added only IF. If you are uncomfortable with this method, an easier quicker way to do it is using a template literal which is also much easier to read.

Song.prototype.toHTML = function() {
    return `<li class="${this.isPlaying ? 'current' : ''}">${this.title} - ${this.artist}<span class="duration">${this.duration}</span></li>`;
};