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 Arrays Loop Through Arrays Loop Through an Array

Posted by Carl Mclamb
.a{fill-rule:evenodd;}techdegree
Carl Mclamb
Full Stack JavaScript Techdegree Student 3,516 Points

The list won't show

So I typed out the code how it should be, but I'm not getting an ordered list of the array that I inserted into the function's parameter. The only thing that shows up that I did correct is the header tags for the playlist in the HTML file. The video/lesson I'm on is loop through an array. If you could help it would be much appreciated.

Cameron Childres
Cameron Childres
11,817 Points
Cameron Childres
Cameron Childres
11,817 Points

Hey Carl,

Could you share your code or workspace? That would make it much easier to help.

You can either copy/paste your code directly in to the post and format it using to "markdown cheatsheet" linked below the comment box, or you can click the camera icon in the top right of the workspace to take a "snapshot" which will give you a shareable link .

Carl Mclamb
.a{fill-rule:evenodd;}techdegree
Carl Mclamb
Full Stack JavaScript Techdegree Student 3,516 Points

....javascript

let playlist = [ 'So What', 'Respect', 'What a Wonderful World', 'At Last', 'Three Little Birds', 'The Way You Look Tonight' ];

function createListItems(arr) {

let items = ''; for( let i = 0; i < arr.length; i++) { items += <li> ${i}</li>; } return items; }

document.querySelector('id').innnHTML = `

<ol> ${createListItems(playlist)}

</ol>`;

1 Answer

Cameron Childres
Cameron Childres
11,817 Points
Cameron Childres
Cameron Childres
11,817 Points

Thanks for the code! Next time, use three backticks to wrap the code and it will appear like mine does at the end of this post, like this:

```javascript
code goes here
```

Here's what I've noticed:

  • In the for loop, <li>${i}</li> will make list items with just the value of i -- you want to use i for the index of the array, like arr[i]
  • document.querySelector('id') is not valid, this will be looking for an element like <id> which does not exist. Try the <main> element instead
  • .innnHTML should be corrected to .innerHTML

Here is your code with the changes I've just mentioned:

let playlist = [ 'So What', 'Respect', 'What a Wonderful World', 'At Last', 'Three Little Birds', 'The Way You Look Tonight' ];

function createListItems(arr) {
let items = ''; 
for( let i = 0; i < arr.length; i++) { 
  items += `<li> ${arr[i]}</li>`; 
} 
  return items; 
}

document.querySelector('main').innerHTML = `<ol>${createListItems(playlist)}</ol>`;

Hope this helps! Let me know if you have any questions.

Carl Mclamb
.a{fill-rule:evenodd;}techdegree
Carl Mclamb
Full Stack JavaScript Techdegree Student 3,516 Points

Thanks so much!