TreeTunes Issue... Buttons not working properly...

Question

Hi everybody. I followed along with Andrew Chalkley through the object Oriented JavaScript course but My final code for the TreeTunes music player is not working correctly, specifically the buttons. Play does not play, next seems to be ok, stop does nothing, but play seems to stop. I;m only going off the color changing on the playlist songs...

Anyway, here is the app.js file:

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');
var stardust = new Song('Stardust', 'RYKR', '4:53');

var manOfSteel = new Movie('Man of Steel', 2013, '2:23:00');

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

playlist.add(manOfSteel);

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');
playButton.onclick = function()
{
    playlist.stop();
    playlist.renderInElement(playlistElement);
}

Here is the media.js file:

function Media(title, duration)
{
    this.title = title;
    this.duration = duration;
    this.isPlaying = false;
};

Media.prototype.play = function()
{
    this.isPlaying = true;
};

Media.prototype.stop = function()
{
    this.isPlaying = false;
};

Here is the song.js file:

function Song(title, artist, duration)
{
    Media.call(this, title, duration);
    this.artist = artist;
};

Song.prototype = Object.create(Media.prototype);

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

Here is the movie.js file:

function Movie(title, year, duration)
{
    Media.call(this, title, duration);
    this.year = year;
};

Movie.prototype = Object.create(Media.prototype);

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

Here is the playlist.js file:

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

And here is the index.html file, for reference:

<!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="media.js"></script>
    <script src="movie.js"></script>
    <script src="song.js"></script>
    <script src="app.js"></script>

</body>

</html>

I'm sure it's probably something stupid that I'm missing, but any help would be awesome, as the console shows no errors...

Thank you in advance :-)

Richard

Answer 1 · 2015-07-03T06:16:47Z

July 3, 2015 6:16am

Hey there,

In your app.js file your stopButton function is currently playButton.onclick change that to stopButton.onclick and you should be good to go.

Currently:

var stopButton = document.getElementById('stop');
playButton.onclick = function()
{
    playlist.stop();
    playlist.renderInElement(playlistElement);
}

Should Be:

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

Welcome to the Treehouse Community

Looking to learn something new?

Richard Nash

Richard Nash

TreeTunes Issue... Buttons not working properly...

Andrew Chalkley

Andrew Chalkley

Richard Nash

Richard Nash

Richard Nash

Richard Nash

1 Answer

Justin O'Reilly

Justin O'Reilly

Richard Nash

Richard Nash