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
Jeffrey Vierra
25,404 PointsNothing prints?
I seem to be sharing an issue with everyone on this segment. I followed the instructions and I can't seem to get my code to print to the page.
I tried from the work space. I also tried to download the code to my computer and test it locally and I get the same results.
Here is my code:
*** From playlist.js **
var playList = [
'I Did It My Way',
'Respect',
'Imagine',
'Born to Run',
'Louie Louie',
'Maybellene'
];
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);
}
printList(playList);
**** Here is the index.html file --> Am I missing a div somewhere?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Musical Playlist</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>My Music Playlist</h1>
<script src="js/playlist.js"></script>
</body>
</html>
*** Here is my css **
@import url('http://necolas.github.io/normalize.css/3.0.2/normalize.css');
/*General*/
body {
background: #fff;
max-width: 980px;
margin: 0 auto;
padding: 0 20px;
font: Helvetica Neue, Helvectica, Arial, serif;
font-weight: 300;
font-size: 1em;
line-height: 1.5em;
color: #8d9aa5;
}
a {
color: #3f8aBf;
text-decoration: none;
}
a:hover {
color: #3079ab;
}
a:visited {
color: #5a6772;
}
h1, h2, h3 {
font-weight: 500;
color: #384047;
}
h1 {
font-size: 1.8em;
margin: 60px 0 40px;
}
h2 {
font-size: 1em;
font-weight: 300;
margin: 0;
padding: 10px 0 30px 0;
}
#home h2 {
margin: -40px 0 0;
}
h3 {
font-size: .9em;
font-weight: 300;
margin: 0;
padding: 0;
}
h3 em {
font-style: normal;
font-weight: 300;
margin: 0 0 10px 5px;
padding: 0;
color: #8d9aa5;
}
ol {
margin: 0 0 20px 32px;
padding: 0;
}
#home ol {
list-style-type: none;
margin: 0 0 40px 0;
}
li {
padding: 8px 0;
display: list-item;
width: 100%;
margin: 0;
counter-increment: step-counter;
}
#home li::before {
content: counter(step-counter);
font-size: .65em;
color: #fff;
font-weight: 300;
padding: 2px 6px;
margin: 0 18px 0 0;
border-radius: 3px;
background:#8d9aa5;
line-height: 1em;
}
.lens {
display: inline-block;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #8d9aa5;
border-radius: 5px;
position: absolute;
margin: 5px 0 0 -19px;
}
#color div {
width: 50px;
height: 50px;
display: inline-block;
border-radius: 50%;
margin: 5px;
}
span {
color: red;
}
Thanks in advance
Moderator edited: Added markdown so that code will render properly in the forums.
5 Answers
Steven Parker
231,269 PointsIt looks fine to me.
Now that Jennifer has formatted your code (thanks! 
So I tried it myself and it renders the song list on the page just as you might expect.
Is it possible that you have JavaScript (or just "scripts") disabled in your browser?
Jeffrey Vierra
25,404 PointsI deeply apologise, that was soo embarrassing. Thank you for link and markdown adjustment.
Jeffrey Vierra
25,404 PointsHey Steven,
Thanks for the response. I'm not exactly sure why the code doesn't run. JS is enabled, and I am able to run other code in my browser. I also tried clearing the cache, and using another browser.
Steven Parker
231,269 PointsWell, it doesn't seem to be the code itself.. I'm guessing you built this in the workspace? You could make a snapshot of your workspace and post the link to it here.
Ching Wun Lau
1,564 Pointsfor (var i = 0; i < list.length; i +=1 )
It should be playList.length rather than list.length
Jennifer Nordell
Treehouse TeacherHi there! Your code would work but so does the original code. In your code you are taking the length of the global playList, which is fine. But in the original poster's code they are passing in the playList as an argument.
function printList (list ){
var listHTML = '<ol>';
for (var i = 0; i < list.length; i +=1 ) {
listHTML += '<li>' + list[i] + '</li>';
}
listHTML += '</ol>'
print(listHTML);
}
The function takes a parameter of list not playList. The original poster's code is also valid. A parameter is simply a variable which is scoped to the function and assigned a value at the time the function is run by having an argument passed to it from the call site. Ulltimately, the naming of parameters/variables is up to the person coding.
Steven Parker
231,269 PointsI would add that while it might work in this particular case, referencing playList directly instead of using the passed parameter is a bad practice and would likely cause problems in a larger program. In this respect, the original program loop is a more correct approach.
Jennifer Nordell
Treehouse TeacherI agree with Steven Parker on this point.
Jeffrey Vierra
25,404 PointsThanks for the follow-up. What makes TeamTree special is not just the countless hours of training, but the community that supports it.
Thank you again.
Thomas Duckett
8,038 PointsThis conversation is VERY helpful. Thanks Jennifer Nordell and Steven Parker.
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherHi there! I took the liberty of adding some markdown to your code to make it easier for others to read and assist you. If you have a moment, take a look at the Markdown Cheatsheet at the bottom of the "Add an Answer" section for instructions on how to post code to the forums.