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

Getting a console error about why my songs aren't displaying. Not able to find the mistake

My songs are not displaying on the playlist. I am getting an error in the console, saying "Uncaught TypeError: Cannot read property 'add' of undefined" referring to line 6 of my app.js file. Perhaps I am overlooking something, but I do not see what is wrong with my code. If anyone can help, it would be greatly appreciated.

// My app.js code
var playlist = Playlist();

var moneyAintAThing = new Playlist("Money Aint A Thing", "Jay-Z", "3:45");
var hardKnockLife = new Playlist("Hard Knock Life", "Jay-Z", "3:30");

playlist.add(moneyAintAThing);
playlist.add(hardKnockLife);

var playlistElement = document.getElementById("playlist");

playlist.renderInElement(playlistElement);

var playButton= document.getElementById("play");
playButton.onclick = function() {
  playlist.play();
  playlist.renderInElement(playlistElement);
}
var nextButton= document.getElementById("next");
nextButton.onclick = function() {
  playlist.next();
  playlist.renderInElement(playlistElement);
}
var stopButton= document.getElementById("stop");
stopButton.onclick = function() {
  playlist.stop();
  playlist.renderInElement(playlistElement);
}
// My song.js code
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 += '>';
  htmlString += this.title;
  htmlString +=' - ';
  htmlString += this.artist;
  htmlString += '<span class="duration">';
  htmlString += this.duration;
  htmlString += '</span></li>';
  return htmlString;
};
//My playlist.js code
function Playlist() {
  this.songs = [];
  this.nowPlayingIndex = 0;
}

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

5 Answers

Ahh oh. In your app.js you need to add "new" before the Playlist() call on the first line. It's not creating a new instance of the constructor without it.

YES!

Thank you, sir! I have no idea how I missed that, but I am glad you and Dale helped. Much appreciated to you both

You bet. Have a great holiday!

What order are you linking the js files in your index.html? As your UI script, app.js should come last, as it refers to the code in playlist.js:

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

That would explain the Uncaught TypeError.

In my index.html file, the scripts are listed in the following order: playlist.js, song.js and then app.js. What order do you have yours in?

That's correct. Dale caught the error. See below!

Dale Severude
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,350 Points

Hi Eric, In your app.js file you are declaring new Playlist(s), they should be new Song(s). Change this on both of these lines and I think you are good.

var moneyAintAThing = new Playlist("Money Aint A Thing", "Jay-Z", "3:45");
var hardKnockLife = new Playlist("Hard Knock Life", "Jay-Z", "3:30");

Ah good eye, Dale. Didn't even catch that!

I changed both of these but am still getting the same error. Thank you for pointing out my mistake though. I am going to see if the order of the js file links affects anything

Dale Severude
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,350 Points

Hi Eric, Are you still getting the same error on the same line?

var moneyAintAThing = new Song("Money Aint A Thing", "Jay-Z", "3:45");
var hardKnockLife = new Song("Hard Knock Life", "Jay-Z", "3:30");

These 2 lines work for me and if it is not working there should be a new error.

Yes, Dale. Same error on the same line.

Could you show us your index.html?

Of course!

<!DOCTYPE html>
<html>
<head>
    <title>Treetunes</title>
    <link rel="stylesheet" href="style.css"/>
</head>

<body>

    <div>
        <h1>Treetunes</h1>

        <ol id="playlist">

        </ol>
        <button id="play">Play</button>
        <button id="next">Next</button>
        <button id="stop">Stop</button>

    </div>

    <script src="playlist.js"></script> 
    <script src="song.js"></script> 
    <script src="app.js"></script>

</body>

</html>