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
Luca Di Pinto
8,051 PointsWhy build HTML list in Javascript and explanation of code syntax
Hi guys, I need help for this program... First of all it's not clear to me why build a HTML list in JS instead to put it in HTML code... What is the purpose??
Second I need explanation of this code.. I don't understand what does the function print (message) and function printList (list) do... Why do I have tu put list inside the brackets? Does it have a meaning the word list?
Can you explain me better the code listHTML += '<li>' + list[i] + '</li>'; ? What happens in this code? What is list[i]?
And finally what happens with print(listHTML); and printList(playList);?
Sorry for many questions but everything is not clear to me in this step! :-(
7 Answers
Shreyas Sreenivasa
7,804 PointsThe function print(message) is nothing but document.write. He just make the print function as many people are used to print when it comes to output. It is not compulsory to write the function though it's just that people who program other languages can understand it. In printList(list) function you have to put the list in brackets as it takes in the input from the user and stores in the variable list. The 'printList(list)' just allows you to print all the items in the array ( which is in the form of (list) in the function ) as an ordered list. 'i' is the variable which is like the counter and it runs the loop as many number of times as there are items in the array. The code html += '<li>' + list[i] + '</li>' just makes the item in array to an item in the ordered list. list[i] is just calling the array with the number which is stored in the variable i as the index value.
print(listHTML) just prints the array item in the form of a list. printList(playList) just calls the function printList and stores the array playList inside the variable list and executes the function. I hope this is clear to you. This might be very confusing but if you read 2-3 times then i guess you'l get.
Luca Di Pinto
8,051 PointsSo what does the commend "list[i]" do in detail? Doesn't it write the word "list"?? Is it a command?? When did Dave speak about it?
Shreyas Sreenivasa
7,804 PointsFirst understand what the variable list does. The function takes an int when it is called and that input is stored in the variable list. i is the more like the counter of the for loop inside the function printList. It runs the loop until the number stored in it = the number of items in the array(the variable list i mentioned before). i starts from 0 and thus list[i] = list[0] then list[1] then list[2] and so on........ I hope this will make you understand and who is Dave?
Luca Di Pinto
8,051 PointsWhen is the function called? When is the variable list declared? Why do I have to use function print before function printList?
Sorry but I have difficult in every step!
Can you explain me in detail, step by step, what happens in every command please? I have difficult to understand this syntax!
Shreyas Sreenivasa
7,804 PointsLuca Di Pinto can you please send the code?
Luca Di Pinto
8,051 PointsWhich code do you need Shreyas Sreenivasa?
I need help on all the code! :-)
Shreyas Sreenivasa
7,804 PointsI need the javascript and the html code.
Luca Di Pinto
8,051 PointsHi Sreenivasa, this is the 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 ( var i = 0; i < list.length; i += 1) { listHTML += '<li>' + list[i] + '</li>'; } listHTML += '</ol>'; print(listHTML); } printList(playList); '''
Luca Di Pinto
8,051 PointsWhat is the purpose of building a HTML list in javascript? Can't we build it in the HTML file? I don't understand the purpose of it...
And another question... What does the final command do? I mean printList(playList);
It calls the function printList and it passes the argument playList? What does the variable list in function printList(list) matter? Can you explain me this? I didn't understand very well this step! Thanks
Matthew Stein
4,140 PointsJust want to say thank you to James Yerkes for the detailed answer. I was really confused in the video by Dave's use of "list" in the printList function. It would appear that "list" is a variable name but it is never declared, which is what I find confusing. Wondering if Dave could have just used: function printList() { }
James Yerkes
9,556 PointsJames Yerkes
9,556 Pointsfunction printList(list) This creates the function blueprint - it describes how the function will work. The variable "list" says that printList will take one argument, and that argument will be mapped to the keyword "list" WITHIN THE FUNCTION, that can only be used within printList. This is just the name you will use within the function to refer to the data passed INTo the function. When you actually go to execute the function in your program, the variable you pass will likely have a different name, for example later on when he runs it, he uses the variable "playList", which is an array created at the top of the code. Whatever variable you pass into printList will be referred to as "list" from within the function itself. It simply passes, or remaps, the array "playList" temporarily to "list" within the function.
list[i] This is being run within a "for" loop, which is using the variable "i" as a number counter that increases each time it cycles through the loop. So for example, "i" will be 0, then 1, then 2, etc. This means you are effectively saying "list[2]", for example. And since we know "list" WITHIN THE FUNCTION is actually referring to the array "playList" that was passed into the function, what is effectively being printed is the data in "playList[2]" (or playList[0], playList[1], etc. as the loop makes each pass)
print(listHTML) listHTML is the variable that stores all the HTML that was built up. This comment (print) simply does a document.write with that HTML - it displays the constructed HTML to the webpage.
printList(playList) This is the "meat" of the program that: 1) requires passing an array INTO the function. That array is playList created at the top of the program, which is a list of songs. 2) cycles through that list and dynamically generates the HTML necessary to display each item into HTML 3) stores that generated HTML into a variable (listHTML) 4) prints that generated HTML into the document, using print(), which is actually just a shortcut to document.write()