Uncaught TypeError: this.songs[i].toHTML is not a function

Question

playlist.js

function Playlist() {
  this.songs = [];
  this.nowPlayingIndex = 0;
}

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

  }

};

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

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","5:52");




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

}

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>

Answer 1 · 2015-12-14T18:19:02Z

December 14, 2015 6:19pm

I have not tested out the code, but if the files are separate, you will need to include the file in order to call toHTML as it does not see it as a function. The other reason why this could be failing is, you are calling the function where it does not exist. this.song[i].toHTML. I do believe within toHTML you will need to " return this; " in order to be able to chain the proto. correct me if am wrong.

Welcome to the Treehouse Community

Looking to learn something new?

Anthony c

Anthony c

Uncaught TypeError: this.songs[i].toHTML is not a function

1 Answer

kareem Pierre

kareem Pierre