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

Lindsey Whitney
Lindsey Whitney
9,699 Points
Posted by Lindsey Whitney
Lindsey Whitney
9,699 Points

Buttons don't work

Everything seems to be displaying correctly, but the buttons aren't working. I've re-watched the video to try to catch my error, but can't find it. On a related note, it would be great to have access to the completed files done by the instructor. It would be easier to find your mistakes, and would make great reference material.

Thanks, Lindsey

Lindsey Whitney
Lindsey Whitney
9,699 Points
Lindsey Whitney
Lindsey Whitney
9,699 Points

I thought it would pull in my code automatically, but I guess I have to paste it all in? Here goes...

index.html 
<!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>
song.js 
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; 
};
playlist.js 
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(); 
  }
};
app.js 
var playlist = 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); 
}

2 Answers

alexlitel
alexlitel
25,059 Points
alexlitel
alexlitel
25,059 Points

Lindsey Whitney There appears to be a few errors in your toHTML prototype. You forgot to include the start of an li tag at the beginning of your function and close it in quotes. Additionally, you accidentally capitalized the "l" in playing in this.isPlaying and forgot the semicolon after htmlString += ' - '.

This is what the code should look like.

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;
};
Lindsey Whitney
Lindsey Whitney
9,699 Points
Lindsey Whitney
Lindsey Whitney
9,699 Points

Thank you!!! I actually did have the start of the li tag in my workspace — but it didn't paste for some reason (or maybe I managed to accidentally delete a few characters). But fixing the last two things you mentioned fixed it! Amazing how you can proof read and still miss things like that :p