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 Tani Huang
Tani Huang
6,952 Points

Few question about this project

1) Is it better add the";" semicolon the end of "}" ? When do we need it ? 

Song.prototype.toHTML = function() {
  var htmlString = '<li';
  if(this.isPlaying) {
    htmlString += ' class="current"';
  } //no semicolon
  htmlString += '>';
  htmlString += this.title;
  htmlString += ' - '
  htmlString += this.artist;
  htmlString += '<span class="duration">'
  htmlString += this.duration;
  htmlString += '</span></li>';
  return htmlString;
};

2) this.nowPlayingIndex = 0; mean every time start at the first song ?

function Playlist() {
  this.songs = []; 
  this.nowPlayingIndex = 0; //start at first song ?
}

3) Why we need to put .renderInElement(playlistElement) again ? refresh something?

var playButton = document.getElementById("play");
playButton.onclick = function() {
  playlist.play();
  playlist.renderInElement(playlistElement); // Why and what is this for?
}

4) How can we define this.isPlaying is true or false ? seem like it does not show anything but it can add current class...

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

5) Constructor functions normally use, when we need to create something that have the same content?

This link of the video:
https://teamtreehouse.com/library/objectoriented-javascript/constructor-functions-and-prototypes/making-the-ui-work

1 Answer

Steven Parker
Steven Parker
231,172 Points
Steven Parker
Steven Parker
231,172 Points
  1. Semicolons are optional at the end of a statement if it is also the end of a line, but it is a "best practice".
  2. This is a constructor function, so the 0 is set only once when the object is created.
  3. Yes, the screen is updated to show that the item just clicked is currently playing.
  4. The "play" and "stop" methods change the value of "isPlaying".
  5. Yes, constructor functions create "instances" of similar objects.
Tani Huang
Tani Huang
6,952 Points

1) base on question NO.2 and NO.3 - I guest I have wrong understanding of these two step..if click button what will happen to the renderInElement
-This is a constructor function, so the 0 is set only once when the object is created.
-Yes, the screen is updated to show that the item just clicked is currently playing. 

Playlist.prototype.renderInElement = function(list) { //1. function - list down <li></li> tag
  list.innerHTML = "";
  for (var i = 0; i < this.songs.length; i++) {
    list.innerHTML += this.songs[i].toHTML();
  };
};

function Playlist() {
  this.songs = [];
  this.nowPlayingIndex = 0; //2. set current song = [0]
}

var playButton = document.getElementById("play");
playButton.onclick = function() {
  playlist.play();
  playlist.renderInElement(playlistElement); //3. clicking button will reset the current song to [0]
};
var nextButton = document.getElementById("next");
nextButton.onclick = function() {
  playlist.next();
  playlist.renderInElement(playlistElement); //3. clicking button will reset the current song to [0]
};
var stopButton = document.getElementById("stop");
stopButton.onclick = function() {
  playlist.stop();
  playlist.renderInElement(playlistElement); //3. clicking button will reset the current song to [0]
};

2) base on question NO.4 - if(this.isPlaying) equal to something ?? 

function Song(title,artist,duration) {
  this.title = title;
  this.artist = artist;
  this.duration = duration;
  this.isPlaying = false; //1. default value = 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){ //3. default = false..both of playButton and stopButton has "this.isPlaying" how can it know will add or remove
    htmlString += ' class="current"';
  }
  htmlString += '>';
  htmlString += this.title; 
  htmlString += ' - ';
  htmlString += this.artist;
  htmlString += '<span class="duration">';
  htmlString += this.duration;
  htmlString += '</span></li>';
  return htmlString;
};

var playButton = document.getElementById("play");
playButton.onclick = function() {
  playlist.play(); //2. when clicking button .isPlaying = true;
  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(); //2. when clicking button .isPlaying = false;
  playlist.renderInElement(playlistElement);
};
Steven Parker
Steven Parker
231,172 Points
Steven Parker
Steven Parker
231,172 Points
  1. Clicking any of the three buttons calls "renderInElement" to update the list shown on the screen. The "playListElement" is passed as the argument and the list update is created by converting each item in the list to an HTML list item.
  2. You don't need to check "isPlaying" to be equal to anything. It is a boolean value, which means it holds either true or false. So when it is true, the the code block after the "if" will run.