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

Yohanan Braun-Feder
Yohanan Braun-Feder
6,101 Points
Posted by Yohanan Braun-Feder
Yohanan Braun-Feder
6,101 Points

for loop inside function not running somehow... why?

hi everyone, typed the js code just like the video, but in the end I get an empty <ol> tag in the html, meaning (i think) the for loop never runs.

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 ( i= 0; i <= list.legth; i+= 1) {
    listHTML += '<li>'+ list[i] +'</li>';
  }
  listHTML += '</ol>';
  print(listHTML);
}
printList(playList);

the index.html file reads:

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

the html from the console reads:

<!DOCTYPE html>

<html lang="en" hola_ext_inject="disabled">

    <head></head>
    <body>
        <h1></h1>
        <script src="js/playlist.js">
        </script>
        <ol></ol>
    </body>

</html>

which shows the code inside the for loop never runs since it returns empty. when i type the array name in the console i get back all the items stored in the array. any ideas would be welcome...

Marcus Parsons
Marcus Parsons
15,719 Points

Hi Yohanan,

Treehouse uses Github Flavored Markdown and so you must use markdown in order to post code. Just edit what you have there already. Here's a handy image for how to post code. Just be sure to have an empty line above the first 3 backticks and an empty line below the last 3 backticks. And where it says "css" you can put what language you're posting i.e. javascript, html, etc.

code

3 Answers

Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

Yohanan,

It's a little hard to read your code but take a look at the code below, and that is how it should look for the most part. I saw a couple is issues not bad just a couple of little things. First you forgot to set the var i in the for loop. you can set it outside of the loop if you want, but I just think it's cleaner to set the var i inside the loop.

the second thing is you need to setup the ordered list item outside of the for loop but inside the function. because we only want an open ordered list item at the beginning and a closing tag a the end, we open the var in this case it's var listHTML to have an ol tag then to create the li items we run the array through the loop each time adding a li element. then once the loop completes we close the ordered list by adding the closing list item string to the var listHTML.

and from what i can see, it looks like you understand the rest of how the program is to execute.

happy coding, and just remember its easier for everyone to read your code if you review the markdown cheatsheet and use what Marcus is showing you. 

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);
Yohanan Braun-Feder
Yohanan Braun-Feder
6,101 Points
Yohanan Braun-Feder
Yohanan Braun-Feder
6,101 Points

hi edited my OP. readable now... the code looks similar to what you posted Jacob Mishkin but what it actually does is provide an empty list.

as you can see from the console log that says

<ol></ol>

and no error messages or bugs in the code are reported.

Marcus Parsons
Marcus Parsons
15,719 Points

Yohanan,

Jacob's code is right. You have a misspelling in the length property in your for loop. Also, you don't want to use <=, just use <.

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>';
  //legth fixed to be length
  //also <= should only be <
  for ( i= 0; i < list.length; i+= 1) {
    listHTML += '<li>'+ list[i] +'</li>';
  }
  listHTML += '</ol>';
  print(listHTML);
}
printList(playList);
Yohanan Braun-Feder
Yohanan Braun-Feder
6,101 Points
Yohanan Braun-Feder
Yohanan Braun-Feder
6,101 Points

pesky typos. and thanks for the distinction between < and <=

Marcus Parsons
Marcus Parsons
15,719 Points

Haha yes indeed and I should clarify: the reason why you need a < sign and not a <= sign is that if you have a less than or equals sign, the for loop will end up putting i equal to the length of the array which will always go out of bounds for the array. So, if your array has 6 items in it (like yours), they go from index 0-5, as you know, but i will end up being 6 which is outside of the array and will give you an error when you try listing a nonexistent value. See what I mean?