Why won't my buttons work!

I have tried everything! playButton.onClick(), nextButton.onClick(), and stopButton.onClick() work just fine in the console but my physical buttons do nothing. Iv'e cleared the cache several times because I have had problems in the past related to that. I have gone over the video and code several times and I don't seem to be missing anything but I'm obviously wrong. I'm probably missing something small but I need help finding it. Thanks in advanced!

here's my code:

app.js ''' var playlist = new Playlist();

var hereComesTheSun = new Song("Here Comes The Sun", "The Beatles", "2:54"); var theWall = new Song("The Wall", "Pink Floyd", "4:52"); var wishYouWereHere = new Song ("Wish You Were Here", "Incubus", "3:52");

playlist.add(hereComesTheSun); playlist.add(theWall); playlist.add(wishYouWereHere);

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

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

}; '''

songs.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; } '''