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

Stephen Selvey
Stephen Selvey
366 Points
Posted by Stephen Selvey
Stephen Selvey
366 Points

Not adding current class?

I've added all the code from the videos but this portion I can't get to work. No console errors but must have missed something?

miikis
miikis
44,957 Points

You gotta post your code man ... how can anyone help you otherwise?

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

you can post your code using markdown syntax so it displays nicely, or using a workspace snapshot URL (see https://teamtreehouse.com/library/previews-and-snapshots )

Stephen Selvey
Stephen Selvey
366 Points
Stephen Selvey
Stephen Selvey
366 Points

Hi,

I'm new to Treehouse so didn't know about snapshots but here it is I believe:

https://w.trhou.se/id2c6ib7cu

Any help is appreciated, just stuck at this point.

2 Answers

miikis
miikis
44,957 Points

Hi Stephen,

The errors in your code are located in app.js and song.js.

In song.js, it's the Song#toHTML() method that's causing the problem; you're closing your li tag to early and adding an unnecessary span tag. It should look like this:

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

In app.js, the problem is inside your event-handlers; you forgot to call the Playlist#renderInElement() method after calling the Playlist#play() method. Remember that the Playlist#play() method changes the current song's isPlaying property to true but that it does not update the DOM. In order to update the DOM, you have to call the current song's Song#toHTML() method and that is done through Playlist#renderInElement(). You should also do this for the other methods that stop the playlist and advance the playlist. In short, your app.js should look like this:

var playlist = new Playlist();

var disconnected = new Song("Disconnected", "Face to Face", "3:00");
var olderChests = new Song("Older Chests", "Damien Rice", "5:00");

var playlistElement = document.getElementById("playlist"),
    playButton = document.getElementById("play"),
    nextButton = document.getElementById("next"),
    stopButton = document.getElementById("stop");

playlist.add(disconnected);
playlist.add(olderChests);

playlist.renderInElement(playlistElement);


playButton.onclick = function () {
    playlist.play();
    playlist.renderInElement(playlistElement)
}

nextButton.onclick = function () {
    playlist.next();
    playlist.renderInElement(playlistElement)
}

stopButton.onclick = function () {
    playlist.stop();
    playlist.renderInElement(playlistElement)
}

Welcome to Treehouse :)

Stephen Selvey
Stephen Selvey
366 Points
Stephen Selvey
Stephen Selvey
366 Points

Hi, made those corrections and it's working now. Thanks for the help!

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

i took a look at it. THe data is being editted, but not the UI. I tried:

var playlist = new Playlist();

var disconnected = new Song("Disconnected", "Face to Face", "3:00");
var olderChests = new Song("Older Chests", "Damien Rice", "5:00");

playlist.add(disconnected);
playlist.add(olderChests);

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

playlist.renderInElement(playlistElement);

var playButton = document.getElementById("play");
playButton.onclick = function() {
  console.log("play");
  playlist.play(); 
  var playlistElement = document.getElementById("playlist");
  playlist.renderInElement(playlistElement);
}
var nextButton = document.getElementById("next");
nextButton.onclick = function() {
  console.log("next");
  playlist.next(); 
  var playlistElement = document.getElementById("playlist");
  playlist.renderInElement(playlistElement);
}
var stopButton = document.getElementById("stop");

stopButton.onclick = function() {
  console.log("stop");
  playlist.stop(); 
  var playlistElement = document.getElementById("playlist");
  playlist.renderInElement(playlistElement);
}

I can at least see some kind of change. (update: mikis's right about the tags being messed up. I thought once you were rerendering you could diagnose that. He also cleaned up your code a bit. For debugging purposes, i'll explain my approach. I added the console statements to confirm the events were firing. I tested the methods to ensure the data was being affected correctly. This meant the next place to look was for what was updating the UI. I added in the method calls to do the rendering, and tested this seeing that the page seemed to update, but that your tags were a little messed up. Treehouse teaches how to code, but not necessarily how to debug. It's a process of confirming assumptions and isolating what works and what doesn't. Refactoring for simplicity - as mikis did - should eliminate some potential points for breaking)