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

Not understanding this playlist project error in the JavaScript console

This is the error -

Uncaught TypeError: playlist.add is not a function at app.js:6

And this is my code:

var playslist = new Playlist();

var hereComesTheSun = new Song("Here Comes the Sun", "The Beatles", "2:54");
var walkingOnSunshine = new Song("Walking on Sunshine", "Katrina and the Waves", "3:43");

playlist.add(hereComesTheSun);
playlist.add(walkingOnSunshine);

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);
}

I went over it several times and it looks identical to the code in the tutorial. Not sure how to fix the error. What am I doing wrong?

5 Answers

Benjamin Larson
Benjamin Larson
34,055 Points

I found a couple things:

Look over your playlist.js file - there's a few spots where you have song instead of songs. There should be no singular form of song found in that file :)

In app.js, you'll need to add the renderInElement() function to the nextButton like the others:

var nextButton = document.getElementById("next");
    nextButton.onclick = function() {
    playlist.next(); 
    playlist.renderInElement(playlistElement);
} 

I think those adjustments should get it working but I didn't thoroughly test it.

Benjamin Larson
Benjamin Larson
34,055 Points

Lera Gregory - were you able to get this working? I can take another look at it if it's buggy.

Benjamin Larson
Benjamin Larson
34,055 Points

Might need to see the rest of the project code, but at a quick glance I'm seeing on line 1 that you have var playslist that should be:

var playlist = new Playlist();

If that doesn't work, can you share your workspace?

Ahhh such a silly mistake... Thank you! But, it still didn't work. And I've since caught another mistake where I typed .getElementById with a capital "D". I've corrected those errors and still not working. Here's my workspace -https://w.trhou.se/n2k9m1ulg4

Nope, still buggy. :) Thanks for following up... I stepped away from it for a bit, going to take a look again today with fresh eyes.

Benjamin Larson
Benjamin Larson
34,055 Points

Yeah, I know the feeling of needing to work on something else for awhile. I'm always 1 stack trace error away from weeping in the fetal position and taking up greeting at Walmart. But for some reason I enjoy debugging other people's code. Go figure.

I know the play, next and stop buttons were working when I made the changes above, but if you continue to get errors let me know.

Haaaa... I'm currently debugging my portfolio's drop down menu. #thestruggleisreal If I'm still at it in a few hours, this code will be my gift to you, since you enjoy it it so much.

As far as the playlist code that I've been avoiding, those buttons were already working for me before (I think).

Benjamin Larson
Benjamin Larson
34,055 Points

I like presents--though dropdowns can be kind of evil depending on how you're doing it. If you're using a CSS framework it might take some of the pain out of it.

But sure, I'm always happy to take little breaks to look at code if you want another set of eyes. It's been a good way to refresh old concepts while taking a break from whatever headache-inducing problem I'm currently working on.