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 JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Using For Loops with Arrays

Jeffrey Vierra
Jeffrey Vierra
25,404 Points

Nothing 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.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi 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. :sparkles:

5 Answers

Steven Parker
Steven Parker
230,230 Points

It looks fine to me.

Now that Jennifer has formatted your code (thanks! :relieved:) I looked it over and it seems good.

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
Jeffrey Vierra
25,404 Points

I deeply apologise, that was soo embarrassing. Thank you for link and markdown adjustment.

Jeffrey Vierra
Jeffrey Vierra
25,404 Points

Hey 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
Steven Parker
230,230 Points

Well, 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
Ching Wun Lau
1,564 Points

for (var i = 0; i < list.length; i +=1 )

It should be playList.length rather than list.length

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi 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
Steven Parker
230,230 Points

I 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.

Jeffrey Vierra
Jeffrey Vierra
25,404 Points

Thanks 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.

This conversation is VERY helpful. Thanks Jennifer Nordell and Steven Parker.