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

Posted by Guy Bryant
Guy Bryant
5,106 Points

New line and same line

All of the array items are on their own line in the video but they are all on the same line in the output of my code. I tried adding 

+ <'br'>``` 
to the end of my listHTML variable but that doesn't change anything.

What is giving him the ability to go to a new line?
Why doesn't adding in a line break to my variable not allow me to go to a new line?

1 Answer

Annicha Hanwilai
.a{fill-rule:evenodd;}techdegree
Annicha Hanwilai
iOS Development with Swift Techdegree Student 11,664 Points

Hi Guy, just a guess but I think it's some typo. Make sure you wrap your html tags ( ol, li, br, etc.) in pair of quotes and not to put quotes inside the brackets.

In the video teacher Dave is using ordered list (<ol>, the list with numbers), that's why he can creates new lines without line breaks. So, make sure you're using ordered list.

 //like this
var listHTML = '<ol>' ;

//not this 
var listHTML = <'ol'> ;

/* remember that JavaScript string is the 'thing' between 
a pair of single or double quotes ( ' ' , " " ).             
*/

Sorry if I'm not explaining this properly, but hope it helps :)

Guy Bryant
Guy Bryant
5,106 Points

Here is my code:

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.length; i++){
    listHTML += '<li>' + list[i] + '</li>';  //Even like this listHTML += '<li>' + list[i] + '</li>' + '<br>'; my output is on one line 
  }
  listHTML += '</ol>';
  print(listHTML);
}
print(playList);
Annicha Hanwilai
.a{fill-rule:evenodd;}techdegree
Annicha Hanwilai
iOS Development with Swift Techdegree Student 11,664 Points

Add ordered list tag to the beginning and ending of listHTML string it it should work.

function printList( list ){  
  var listHTML ='<ol>' ; /* here */
  for ( var i = 0; i < list.length; i += 1 ){      
    listHTML += '<li>' + list[i] + '</li>';
  }
  listHTML += '</ol>'; /* and here */
  print(listHTML);
}
Annicha Hanwilai
.a{fill-rule:evenodd;}techdegree
Annicha Hanwilai
iOS Development with Swift Techdegree Student 11,664 Points

Sorry didn't see that ol, now I do. We forgot to call the printList function on the last line.

//this 'print' function will just print the list and doesn't enter the loop at all (because it's in another function)
          print(playList);

//should be this
          printList(playList);

Hope it works now, yay :D

Guy Bryant
Guy Bryant
5,106 Points

Great that fixed it, thanks!

Annicha Hanwilai
.a{fill-rule:evenodd;}techdegree
Annicha Hanwilai
iOS Development with Swift Techdegree Student 11,664 Points

Yay, you're welcome :D