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 Samantha Shugars
Samantha Shugars
4,572 Points

"this.songs[i].toHTML is not a function," says the console

So, I followed the video, tried to load the page and failed, re-watched the video to make absolutely sure I copied the code exactly and as far as I can tell I did, with no errors. The console is telling me I'm not using the toHTML function correctly. Actually, it's telling me it isn't a function at all but either way my code looks like it should work.... I'm sure I'm missing something obvious here, it's always a semi-colon or misplaced bracket, but I'm stumped. Can anyone give me a hand? Thanks so much in advance. (I'm sorry bout posting the file this way but the snapshot option isn't available right now for some reason)

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

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

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

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();
  }
};
LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

I edited your question to display the code correctly

2 Answers

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Do you have a toHTML() method in your song.js file?

Song.prototype.toHTML = function() {
  var htmlString = '<li';
  if (this.isPlaying) {
    htmlString += ' class="current"';
  }
  htmlString += '>';
  htmlString += this.title;
  htmlString += ' - ';
  htmlString += this.artist;
  htmlString += '<span class="duration">';
  htmlString += this.duration;
  htmlString += '</span></li>';
  return htmlString;
};
Samantha Shugars
Samantha Shugars
4,572 Points

Thanks for fixing the code in the question. Identical to the code you've posted here. I mean, I used the double quotes and single quotes inverse to yours but that shouldn't make any difference unless there's some syntactical rule I'm not aware of. How do I display the code properly in these questions? All I can figure is that there's an error reading the code from one file to another but the html is formatted in the correct order, I mean, the songs.js loads before the playlist.js. This is what I have in songs.js:

Song.prototype.toHTML = function() {
  var htmlString = "<li";
  if (this.isPlaying) {
  htmlString += "class='current'";
  }
  htmlString += ">";
  htmlString += this.title;
  htmlString += " - ";
  htmlString += this.artist;
  htmlString += "<span class='duration'>";
  htmlString += this.duration;
  htmlString += "</span></li>";
  return htmlString;
};
LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Below the comment/answer text boxes you will see:

"Reference this Markdown Cheatsheet for syntax examples for formatting your post."

Click on the "Markdown Cheatsheet" link. It will explain all of the tricks. Basically, for code, on a separate line BEFORE your code you want to have three backticks "`" followed by the language that your code is in. Then on a separate line AFTER your code, you want to have just three backticks. Also, if you have text before or after your code then leave 1 blank line between your text and the code.

I will demonstrate below using apostrophes instead of backticks:

Why doesn't my code work?

'''text
var name = "Samantha"
'''

Also is my PHP correct?

'''php
<?php
    echo "Hello World";
?>
'''

Thanks for your help.

click the eye in the lower right to preview your comment/answer code without posting if you want to test it out

Samantha Shugars
Samantha Shugars
4,572 Points
Samantha Shugars
Samantha Shugars
4,572 Points

OH! I got it! Thanks so much! Good to know. Now I can post questions without annoying people with inline code :)

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

No problem. It's pretty common and not annoying at all. Having the code post probably just makes it easier to get a quick answer. :)