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 Terrell Wright
Terrell Wright
12,105 Points

Uncaught typerror: cannot set property 'innerHtml' of null

I can't seem to find a problem in the syntax. Any help would be highly appreciated. Thank You.

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

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

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

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

Playlist.prototype.next = function() { this.stop(); this.nonPlayingIndex++; if(this.nonPlayingIndex === this.songs.length) { this.nonPlayingIndex = 0; } this.play(); };

Playlist.prototype.renderInElement = function(list) { list.innerHTML = ""; console.log('innerHTML'); for(var i = 0; i < this.songs.length; i++) { list.innerHTML += this.songs[i].toHTML();

} };

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

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"); playButton.onClick = function() { playlist.next(); playlist.renderInElement(playlistElement);

}

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

<!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>

3 Answers

Noel Felix
Noel Felix
12,192 Points
Noel Felix
Noel Felix
12,192 Points 
document.getElementById("playList");

<ol id="playlist">

getElement is returning null because "playList" and "playlist" need to match

Richard Hope
Richard Hope
25,237 Points
Richard Hope
Richard Hope
25,237 Points

Don't know if this is a mistake in your code or not, but part of the for loop is missing in what you've pasted here.

Terrell Wright
Terrell Wright
12,105 Points
Terrell Wright
Terrell Wright
12,105 Points

Thank you very much Noel Felix.