"Play" button add songs to the list instead of highlighting it pink. "Next" and "Stop" buttons are not working.

I'm not sure what's wrong. The followings are my codes. I have 4 separate code. This is my first time posting a question, so I'm not exactly sure how to post these codes.

1. index.html

   <div> <h1>Grace's Tunes</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>

2. app.js

var playlist = new Playlist();

var myHeartWillGoOn = new Song("My Heart Will Go On", "Celine Dion", "2:54"); var stars = new Song("Stars", "Jay Chou", "3:31");

playlist.add(myHeartWillGoOn); playlist.add(stars);

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(); var playlistElement = document.getElementById('playlist'); }

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

1. song.js

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

Song.prototype.play = function() { this.isPlyaing = 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="duuration">'; htmlString += this.duration; htmlString += '</span></li>'; return htmlString; };

1. playlist.js

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

Playlist.prototype.add = function(song) { this.songs.push(song); };

Playlist.prototype.play = function() { var currentSong = this.songs[this.nowPlayIndex]; currentSong.play(); };

Playlist.prototype.stop = function(){ var currentSong = this.songs[this.nowPlayIndex]; currentSong.stop(); };

Playlist.prototype.next = function() { this.stop(); this.nowPlayIndex++; if(this.nowPlayIndex === this.songs.length) { this.nowPlayIndex = 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(); } };