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

Hannah Mackaness
Hannah Mackaness
4,437 Points
Posted by Hannah Mackaness
Hannah Mackaness
4,437 Points

was the HTML assigned in the "view element" segment by the browser?

The video shows the inspect element tool being used and in it we see the song list as a ol...where is this written in the code? Or is it assigned by the web browser? Is the sentence

"the html was assigned by the DOM" correct?

thaaaank you kind people of the treehouse community

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

document.write does not convert the strings into html. Only text. You would have to key in the html with concatenation. This applies to all languages.

7 Answers

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

Hey Hanna

// We are trying to print this array aka the list
var playList = [
  'I Did It My Way',
  'Respect',
  'Imagine',
  'Born to Run',
  'Louie Louie',
  'Maybellene'
];
// print message to document HTML page
function print(message) { 
document.write(message);

}
// we are looping the entire list with a for loop here
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 what the instructor is trying to teach us here in this video. We are trying to list all the array in for loop. Basically list everything. Remember arrays start at 0, in this case it goes to 0 to 5. So it's 6 items. We concatenated order list and list html. But we list all the li tags the list in the for loop one by one from the array. So every time the for loop list a list the array gets smaller. 5 to 0.

Yeah hopefully you understand. We use google chrome developer tools to debug the javascript.

Basically we want our javascript to do this for us below [spit out]:

<ol>
<li>I Did It My Way</li>
<li>Respect</li>
<li>Imagine</li>
<li>Born to Run</li>
<li>Louie Louie</li>
<li>Maybellene</li>
</ol>

The reason why we do this is if we have list that is like 100 things you would want to use a for loop instead of typing li tags by hand. I hope that helps.

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

Hi Hannah,

The chrome developer tools are used to debug or analyze code from a website. OL is order list. 

<ol>
<li>list item 1</li>
<li>list item 2</li>
</ol>

It's basically another way to inspect the source code.

Hannah Mackaness
Hannah Mackaness
4,437 Points
Hannah Mackaness
Hannah Mackaness
4,437 Points

thanks - so if you use something like document.write to write a list in js - does it automatically convert it into an ol in the html which you can then view in the source code as html?

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

that's correct Hannah, you can uses functions and methods to insert html with JS.

lakindujayathilaka
lakindujayathilaka
15,244 Points
lakindujayathilaka
lakindujayathilaka
15,244 Points

We are generating the ordered list with all the list items through javascript. Originally there was no ordered list with list items..but he generated them with javascript

Hope this helped

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

concatenation example would be

var p = "<p>";
p += "hello";
p += "</p>";

document.write(p);

spits out this onto html

<p>hello</p>

Yeah it's a lot of concepts. I hope it helps.

Karalyn Heath
Karalyn Heath
18,033 Points
Karalyn Heath
Karalyn Heath
18,033 Points

The helpers.js file contains the function which creates the ordered list and list items. Then the list is populated by the array we create in playlist.js.

Hannah Mackaness
Hannah Mackaness
4,437 Points
Hannah Mackaness
Hannah Mackaness
4,437 Points

Thanks everyone! Now I understand why js is sooo helpful when combined with html/css...a lot less typing

Thomas Katalenas
Thomas Katalenas
11,033 Points
Thomas Katalenas
Thomas Katalenas
11,033 Points

what do you think of my code?

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);
}
document.write("<h1> From the big nerd ranch</h1>" + "<p> http://www.nerdmuch.com/games/1638/top-//best-most-anticipated-upcoming-games-of-2016-game-releases/ </p>");

var playList = ['ReCore', 'Doom', 'Rachet & Clank Remastered', 'Unchartered4: A Thiefs End','Dark Souls III', 'Tom Clancys The Division', 'Dead Island 2', 'Street Fighter V', 'The Last Guardian', 'Cuphead'];

//var playList = ['a', 'j', 'g', 'r'];
printList(playList);