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

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);

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);

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!!!!! :(

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

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

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!!!!!!!

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.

@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 :).

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!

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.

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?

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.

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?

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!

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.