Using For Loops with Arrays - My list is printing inline without format like in the video... Please Help!

Everything is working as it should, except that my list is printing as one long, inline, comma-separated list, rather than in an ordered list with formatting like shown in the video.

My list looks like this:

"Invisible Man,Into the Wild,Finding Alaska,Drop City,On The Road,Lord of the Flies"

I'm in Chrome and moved everything to Codepen. I copied and pasted the exact CSS from the Workspace and made sure my HTML was almost exactly the same, but I've included it below just in case.

1) This is a link to the project file I'm working with in Codepen:

https://codepen.io/alex-franklin/project/live/XWxdwg

2) My JavaScript:

var bookList = [ "Invisible Man", "Into the Wild", "Finding Alaska", "Drop City", "On The Road", "Lord of the Flies" ]; var html = ''

function print(message) { document.write(message); }

function printList( list ) { var listHTML = "<ol>"; for ( var i = 0; i < list.length; i += 1 ) { listHTML += "<li>" + list[i] + "</li>"; } listHTML += "</ol>"; print(listHTML); }

print(bookList);

3) My HTML

var bookList = [ "Invisible Man", "Into the Wild", "Finding Alaska", "Drop City", "On The Road", "Lord of the Flies" ]; var html = ''

function print(message) { document.write(message); }

function printList( list ) { var listHTML = "<ol>"; for ( var i = 0; i < list.length; i += 1 ) { listHTML += "<li>" + list[i] + "</li>"; } listHTML += "</ol>"; print(listHTML); }

print(bookList);