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

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

Everything is so confusing? Will I ever get these right?

  • Do the ordered list in the HTML file exist at the same time with the one generated with JS? If I comment out the list in the HTML file, my JS doesn't display anything so I can't tell if it's because the code is not correct, or I need code in both HTML and JS files for this to work.

  • Why do we give a parameter to the print function (what is message and where did it came from? Why it only appears once in the whole code?).

Dave McFarland
Dave McFarland
Treehouse Teacher

Arikaturika Tumojenko A parameter is like a variable for the function -- when you call the function you "pass" an argument (that's a value like a string, number or even an array) to the function. The function stores that value in the "parameter" (the message parameter in this example). Then the function can use that information to complete whatever the function is programmed to do. This is covered in depth in the section on "Functions" in the JavaScript Basics Course. In particular you can learn about parameters in the Giving Information to Functions video.

14 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

1) The HTML that you generate from your script should replace any in your original HTML file so you should leave the HTML in place. The JavaScript retrieves the HTML via the DOM usually by the elements given id e.h. document.getElementById('list');

You can look further into this by using your browsers Develement Tools, the best one being Chrome's DevTools. You can access this by using CTRL/CMD + SHIFT + J on your keyboard.

2) The parameter is like a variable assigned to a particular function. I'd have to see the code you've written so far but as I understand it the variable message holds a string which is then returned back to the function so it can be displayed in the browser.

Hope this helps :)

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

This is the complete code. I find the challenge strange as I don't remember covering how we create new DOM elements using JS or using the getElementById.

      var playlist = [
"I Did It My Way",
"Bum Bun Bum"
"Paradis Perdue"
"I want it that way"
"Follow rivers"
"Born to run"
     ];

     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(list.HTML);
   }

  printList(playlist);
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Don't worry about that for now, as if you've not come across it now you will in another course. It's not the only way to output values to the browser though. :)

Let's instead break down what's happening here.

First you have your array with 6 items, your song items for your play list

var playlist = [
"I Did It My Way",
"Bum Bun Bum"
"Paradis Perdue"
"I want it that way"
"Follow rivers"
"Born to run"
     ];

Then you have a function that is the logic for writing out the output to the screen.

function print(message) {
   document.write(message);
  }

It doesn't write the message itself moreover it's the framework for doing it.

Next, is another function that takes one parameter, list that loops through each of the songs in the array and prepares to print them out. It also builds up a string of HTML tags to make sure it's nicely presented. They will output in the browser as an ordered list

function printList (list) {

var listHTML = "<ol>";
for (var i = 0; i < list.length; i+=1) {

    listHTML += "<li>" + list[i] + "</li>";
}

listHTML += "</ol>";
print(list.HTML);
   }

The function is called printList but the way it knows which values to print out as by having the name of the array passed in when the function printList is called.

 printList(playlist);
M W
M W
3,446 Points

Does the JavaScript physically place/update the HTML file with the list items and <ol> and <li> tags or for it to work does the HTML file need the corresponding <ol> and <li> tags in the code to be 'populated'? I feel like I'm swimming through treacle!!!!! :(

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Yes it's the JavaScript that populates the HTML list items with the data from the playList array. :-)

The JS located the place in the document to output the data, writes the HTML and knows how many times to output data by iterating through the entire array, which means looping through until it runs out of data i.e. reaches the end of the array.

Then with the printList function, the name of the array is passed in as the argument

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

function printList (list) {

       var listHTML = "<ol>";
       for (var i = 0; i < list.length; i+=1) {

       listHTML += "<li>" + list[i] + "</li>";
       }

      listHTML += "</ol>";
      print(list.HTML);
      }

When and how did we create the list parameter? Why do we use list.length when the array that holds the song's name it's called playlist? I think I'm just going to skip this challenge from understanding :). Thank you so much for all the help.

Thomas Doyle-Engler
Thomas Doyle-Engler
6,005 Points

the list parameter was created when the printList function was made. list is just a place holder where you will actually be putting your playList at when you call the function. list is letting the function know that it will need something put in there to execute. Doing that makes the function reusable in the code if you were to say make another array called albumLists or favoriteArtists. You would only need to call the printList function and give it the new arrays name to make it give you a new list from the different array. I Hope I made some form of sense here

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

@Thomas Doyle-Engler oh, I didn't know you can just create a function and use it later, after you created the structure. So it' s exactly like Jonathan said about:

    function print(message) {
document.write(message); }

It's just the skeleton and we'll be using it later with another parameter? So actually this is happening when we call printList(playlist)... it's the same function which when we created the skeleton had the list parameter, but this time using the playlist parameter?

This is starting to make sense. Thank you :).

M W
M W
3,446 Points

I'm sorry to say this but this whole lesson is so poorly explained for the beginners it's intended for.

I am struggling to understand the explanations above for where the list parameter comes from and why it exists. The video/course producers need to remember that many of us are complete novices and leaving out 'obvious' steps is leading to soooo much confusion and making the lesson a real chore to take in and process.

I am totally in agreement with Arikaturika Tumojenko's point about why/what is the list parameter....and from there the confusion stems and snowballs. It seems that there are gaps in the tuition to fully understand the challenge and the solution. No doubt I'll look back on my post and think how obvious it all should have been - but right now I just wish it could be explained step-by-step and in noob terms :)

I feel so dumb!!!!!!!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

It does seem like a long winded example but it's just trying explain what can be done with JavaScript. Custom methods are written that build actions which are then performed when the methods are called.

When you pass in a variable as a parameter to a method, it;s another way of storing data. But that's all that the parameters is, a placeholder for storing information.

M W
M W
3,446 Points

Thanks for trying to explain. I'm just not getting it to be honest. I think the pre-challenge videos/tutorials really should explain more explicitly what is required and the techniques employed. The problem is that it's demoralizing when certain concepts seem so out of grasp!!!!

M W
M W
3,446 Points

where does 'list' get linked to the items in 'playList'?

"the list parameter was created when the printList function was made. list is just a place holder where you will actually be putting your playList at when you call the function. list is letting the function know that it will need something put in there to execute" Can anyone explain this in really really simple terms?

Thankyou in advance and sorry for missing what I'm sure must be obvious.

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

@Mat Ward

 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>";
}

So... these two functions were JUST DEFINED in this stage. They weren't called so instead of using

function printList(playList)

we used

function printList (list) 

So, the parameter "list" is just a placeholder, meaning it has no role other than being a name that later will be replaced with the value we want the function to be used with. If you remember from previous videos, functions need parameters when they run. So, in order for the function printList to run, we take the "list" placeholder and we REPLACE it with the playList parameter, because in this case we are interested in the playList array.

If later in our program we want to work with another array called printBookNames (for example), we won't need to create another function for that, we are just going to replace the "list" parameter with "printBookNames" instead of "playList". So, we can really use the function how many times we want in our code by just replacing the placeholder (list) with the parameter we want (the name of the array).

The exact same thing happened with this function

  function print(message) {
   document.write(message);
  }

where we first defined it, we used the placeholder message. Later in the code we gave "message" a value so when the function ran, the value of "message" was the value the function used. I don't remember the complete code of this challenge so maybe post it and I can explain more.

Regarding not being able to understand everything that's happening in these videos... I think it's pretty normal. I do agree that some lessons are poorly explained (in this one for example, we were never thaught how to generate new DOM elements with JS) and use things that weren't previously mentioned, but I think it's fine. I personally didn't understand 100% many challenges but for now I think it's more about understanding the concepts of JS rather than building complex programs like the ones we see in the challenges. Don't get discouraged, better days are coming :).

M W
M W
3,446 Points

Thanks for taking the time to reply with such a complete answer.

I can see the logic of what you're saying.

But in this example I have no idea why they didn't just put in playList rather than list to save all the confusion. Or at least explain why!!!

Thanks again for taking the time.

Hi Mat Ward, Maybe this example will make you understand better:

We have 2 arrays stored in 2 different variables:

var animals = ['cow', 'horse', 'pig', 'bunny'];
var clothes = ['t-shirt', 'jeans', 'hat', 'blouse', 'jacket'];

We now want to make an ordered list of them, so we write a function. The function acts like a skeleton that runs it's code once it is called. I think the big mistake in this course is that the function's parameter is called "list". The function's parameter is like a placeholder. If it helps, we can call the parameter "placeholder" instead of "list".

function printList( placeholder ) {
  var listHtml = '<ol>';
  for ( var i = 0; i < placeholder.length; i += 1) {
    listHtml += '<li>' + placeholder[i] + '</li>';
  }
  listHtml += '</ol>';
  print(listHtml);
}

Now we need to call the function "printList" for the variable "animals". When we call the function, the function's "placeholder" parameter is replaced with the variable "animals". So the function will be like this:

printList(animals);  //calling the function for the "animals" variable

/*this is how the function will become*/
function printList( animals ) {  //"placeholder" is replaced with "animals"
  var listHtml = '<ol>';
  for ( var i = 0; i < animals.length; i += 1) {  //"placeholder" is replaced with "animals"
    listHtml += '<li>' + animals[i] + '</li>';  //"placeholder" is replaced with "animals"
  }
  listHtml += '</ol>';
  print(listHtml);
}

When we call the function "printList" for the "clothes" variable, the function will become:

printList(clothes);  //calling the function for the "clothes" variable

/*this is how the function will become*/
function printList( clothes ) {  //"placeholder" is replaced with "clothes"
  var listHtml = '<ol>';
  for ( var i = 0; i < clothes.length; i += 1) {  //"placeholder" is replaced with "clothes"
    listHtml += '<li>' + clothes[i] + '</li>';  //"placeholder" is replaced with "clothes"
  }
  listHtml += '</ol>';
  print(listHtml);
}

As you can see, the function's parameter (in this case the "placeholder" parameter) is like a container that stores information and then replaces that parameter with the variable for which the function was called. At least this is what I've learned so far from this course. I hope this helps you!

Cheers!

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

"I think the big mistake in this course is that the function's parameter is called "list". The function's parameter is like a placeholder. If it helps, we can call the parameter "placeholder" instead of "list"."

So true.

I just tried using playList instead of just (list) in the code and it works . gives better understanding.

M W
M W
3,446 Points

yep, much better - simple things can make life so much easier - Course writers please listen!!! ;)

Mat Ward Thank you for persevering in getting clarification. I too have found this very confusing, but reading through this thread has helped a lot. My only lingering question (and I hope nobody minds my jumping on the end of this!) is if 'placeholder' is indeed just that, does it matter when declaring a function if a placeholder is used or not? Maybe it doesn't have any value to the computer in that moment, but is the placeholder perhaps added more for human benefit (to help anyone looking at the code see what's going on?) or to put it another way, would there be any difference in the performance between the two functions below?:

function printList( placeholder ) {
  var listHtml = '<ol>';
  for ( var i = 0; i < placeholder.length; i += 1) {
    listHtml += '<li>' + placeholder[i] + '</li>';
  }
  listHtml += '</ol>';
  print(listHtml);
}
function printList( ) {
  var listHtml = '<ol>';
  for ( var i = 0; i < placeholder.length; i += 1) {
    listHtml += '<li>' + placeholder[i] + '</li>';
  }
  listHtml += '</ol>';
  print(listHtml);
}
M W
M W
3,446 Points

I think the biggest issue in learning something like JavaScript is that the answers given often contain further presumptions about knowledge.

These might only be very small assumptions but at the stage where the student knows practically nothing about certain aspects of coding then these can lead to further confusion.

That's my biggest issue with the JavaScript course here - although it is basic and must seem frustratingly obvious to others seeing some off the questions posted - the explanatory videos do not give all the information required to understand what is being taught 'without' the student gaining further clarification elsewhere.

I think if a little more care was taken in the writing of the 'basic/beginners' tutorials then a lot of time could be saved by both the student and the generous community who spend their time trying to expand on the videos content. Anyway, I understand the above concepts now so a big THANK YOU to everyone who has taken the time to reply.

To Treehouse - please listen to the comments from beginners - because the only people who can give a genuine beginners impression of the 'for beginner videos are genuine beginners! ;)

Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Mat Ward

Sorry that these videos were frustrating for you. I'd like to hear more about how you worked through the Loops, Arrays and Objects course -- did you take the JavaScript Basics course first? The Loops, Arrays and Objects course is the second in the series and the JavaScript Basics course is a prerequisite that provides the foundation for the Loops course. So the Loops course does assume knowledge from the basics course, but I tried to set it up to be limited to just that earlier course. I'd love to hear your thoughts.

David Kanwisher
David Kanwisher
9,751 Points

Mat Ward, all of your questions were covered in detail in the JavaScript Basics course. I see you took the JavaScript Basics course prior to taking this course. Is it possible that you just didn't recall some of the information that was covered?

Yeah I just finally understood this but it took me a long time to fully grasp. I find this course and some others not very clear and I agree with what other people have said about things not being explained very well. Although these things were covered in the previous course (JavaScript basics) I think it doesn't hurt to explain, just briefly things like this when going through the code. For example that (list) is a placeholder etc. I need repetition in order to fully remember key concepts like this and because, in the beginning, JavaScript is a steep learning curve for newbies like me who have no programming knowledge other than HTML and CSS. The thing with JavaScript is that you can't practice these simple ideas when you're first starting out because they don't actually do anything yet. No one is going to spend their time practicing this stuff in the console because its incredibly boring and, in the end people are learning JavaScript so that they can eventually make a working website, not to practice loops and print it to the log etc. For this reason I think repetition and explanation is required within the courses.

Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Peter Feaver — thank you for this feedback. It's really helpful. I totally agree that it's difficult at the early stages of learning JavaScript, because there's very little you can actually DO that's tangible. You need more knowledge and skills before you can create modal dialogs, and interactive web pages.

I wonder if there is a way to make even the simple stuff "fun" — like you said printing to the console isn't exactly exciting, but maybe there are more interesting exercises we could come up with. I encourage you and other students to chime in on any ideas you all have to make these early lessons more FUN.

Thanks again for the useful and constructive criticism of my course. I appreciate any information that can help us improve here at Treehouse.

M W
M W
3,446 Points

Hello David. It is badly explained in my opinion. I am no longer doing the treehouse training but your comment popped up in my email so thought I should reply. You're obviously one of the people that grasp it well so that's great but for many of us here the descriptions were not clear enough and vague. I don't agree that everything was covered in the basics course - unless it has been updated a little since I took it...and if not then it isn't worded in a way that I could relate the later problems to. If it was clear I wouldn't have posted here and had such great feedback from the community. Good luck with your training.

David Kanwisher
David Kanwisher
9,751 Points

Thanks for the reply, honestly I didn't grasp function arguments right away. I think it's an example of something that is easy to create in a lesson, but you can then fail to recognize them inside programs when they reappear. It's probably because to a new person we aren't sure of the difference between already created JavaScript words like .length and getInt() .pop etc and the made-up variable names that the instructor created off the top of his head. It would probably help if terminology was always used when explaining a lesson, rather than just "doing it". Repetition like you said. I think using multiple resources always helps with programming. It's possible I picked up my understanding from another site, and it "stuck" after seeing it again on Treehouse in the basics course. Sorry to come across as dismissive. Are you still learning to code?

M W
M W
3,446 Points

Hello. I stopped learning to code as decided to focus on UI design. But i will be revisiting html, css and a little javascript when I get a moment to take a breath as have been crazily busy doing the UI. I would agree with you that multiple sources is excellent idea as different perspectives slowly fill in the full picture. I had the classic - I must be incapable of all this coding thing - and as I am looking to what I choose as career I have stuck with the UI and hopefully learn more coding when I can.

David Kanwisher
David Kanwisher
9,751 Points

My suggestion is to continue to learn to code, but learn at your own pace. If you get stuck on an exercise then google 18 different resources until you can get it to click for you. Once it clicks, what's the difference between you and someone who understands the concept in 3 seconds? Now you can both do it, it just happened to take you a little longer to learn. There are many things in life that come easy to one person, and hard to another person. If you solved a puzzle very quickly and someone else really struggled and gave up, would you think you were naturally gifted and shun that person away - or would you say "Don't give up, the answer just sort of came to me- I'm no different than you! The puzzle reminded me or something I've done before so the answer naturally came to me, here's how I approached the problem so you can solve it too!"

Hang in there, good luck with your UI work!

Dave McFarland
Dave McFarland
Treehouse Teacher

Great advice David Kanwisher! At Treehouse we've been reading the fabulous book, Make It Stick: The Science of Successful Learning. The authors discuss what really habits and actions lead to long-term learning, and their research supports what you're encouraging: persevere and and search for answers.

In fact, while this may seem counter-intuitive to many people, the BEST learning is actually the learning that requires effort and isn't just grasped in 3 seconds. Quickly learning also can lead to quickly forgetting; but struggling with concepts helps solidify the knowledge and literally changes your brain to make that learning stick.

I used to think that if I didn't get something right away that I wasn't good at it, or couldn't learn it. Fortunately, I've learned enough about learning to realize we can all learn and struggling to grasp what we're learning isn't an indication that we can't learn, but really evidence that if we stick with it, we can learn things even more deeply.

Thanks for your thoughtful remarks and for being a Treehouse student. And thank you M W for your honest critique of Treehouse and my courses.