Help needed for Test your Skills: Loops 1

MDN Learn
#1

I’m currently on exercise 1 of Test your skills for loops.

Here is my code.

Loops 1|549x500

My approach was to use a for loop to loop over the array and each item to the list. I ran into my first problem, which is my console displayed the error:

TypeError: Argument 1 of Node.appendChild is not an object.

I had no idea what this meant. I googled around but couldn’t really find anything. I eventually looked at the marking guide, and I don’t understand the solution there.

for(let i = 0; i < myArray.length; i++) {
  let listItem = document.createElement('li');
  listItem.textContent = myArray[i];
  list.appendChild(listItem);
}

This solution feels random to me, I was hoping to get some clarity on the solution.

what is document.createElement(‘li’);
what is listItem.textContent?
and lastly what is list.appendChild(listItem);

I kind of understand what each of these mean, but this solution would have never occurred to me. Thanks in advance, I hope I was not too confusing. Let me know if you need me to clarify anything

1 Like
#2

hi there @Hassan_Garshasb,

Let’s go through your queries one by one and see if we can shed some light on these things.

  1. “TypeError: Argument 1 of Node.appendChild is not an object.”

So, appendChild() is a method that can be called on any DOM element node (basically JavaScript objects representing HTML elements), which nests another element node inside that element. So section represents a <section> element, and section.appendChild(list) will result in the following HTML structure:

<section>
  <ul></ul>
</section>

The TypeError you are getting usually means that the object you are passing to appendChild() as a parameter is not of the correct type - it is not an object that can be nested inside a DOM element node. Most likely you are not setting the object’s value correctly, so it is actual equal to undefined, or null.

Note: If you are not familiar with DOM Scripting, I’d suggest you have a read of this article: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents.

  1. document.createElement(‘li’);

createElement() creates a new DOM element node of the type specified in the parameter. So in this case, it is creating a new <li> element

  1. listItem.textContent = myArray[i]

textContent represents the text content inside an element. So in thia case we are setting the text content of the list item we just created to the string inside myArray item i.

  1. list.appendChild(listItem);

See above explanation of appendChild().

It is always a good idea to search on MDN for more information about what different methods and properties do - we have a load of reference material. Go to your favourite search engine and type “mdn thing I want information on”, e.g. “mdn appendChild”.

Does that clarify things somewhat? Feel free to ask more questions :wink:

#3

Let’s take a look at your code:

let list = document.createElement('ul');

Ok, so far, so good. At this stage, list is <ul>, i.e. an unordered list. If you go to your web console and write list, it will show you <ul> and you’ll be able to look at what that means exactly.

for (i = 0; i < myArray.length; ++i) {
  // ...
}

Yep, that’s one of the ways to do a for loop through myArray. I strongly suggest adding let i = 0 ("By the way, I’m going to create a new variable called i and it starts at 0") rather than just i = 0 ("I’m going to assume that there’s already a variable called i and set it to 0), to avoid any nasty surprises.

  list += ", " + myArray[i];

Earlier, you defined list to be a <ul>, i.e. a list on the page.

Now, you’re adding +=. But what does += do? Well, when you write a += b, as you probably know, it means a = a + b: the new value of a is the old value of a + b.

In JavaScript, though if either a or b is not a number, a + b means “add some text at the end”.

If you write list + ", " + "tomatoes" in your web console, you’re going to see: "[object HTMLListElement], tomatoes"… that’s not what you want.

By using += (or simply +), you have asked JavaScript to turn list into a text. This text is the text "[object HTMLListElement]".

What you want, rather, is to add items in your list. This is what the lines you pasted do:

  let listItem = document.createElement('li'); // Create a new list item
  listItem.textContent = myArray[i];           // Add some text
  list.appendChild(listItem);                  // Don't forget to add the item to your list.

I hope this helps!

1 Like
#4

Thank you very much, that clarifies it! So, there is quite a bit of new content here, listItem.textContent, document.createElement etc. I don’t recall seeing this material taught in the tutorials. Was this intended to be an exercise where you refer to outside resources to find a solution?

#5

Thank you, this helps substantially, I understand the solution now! Follow up: A lot of this material is new, DOM, events, appendChild, objects etc, things that I didn’t practice from the tutorials. Was this intentional, i.e. to get you to learn how to google around and find the relevant information?

#6

@Hassan_Garshasb this is a good question. It wasn’t really intentional; really I am walking a difficult path with these tutorials — I am intending to teach all the essential parts of the client-side JavaScript language, which includes variables, loops, conditionals, etc.

However, the DOM API stuff like createElement() and appendChild() isn’t part of the JavaScript language — it is part of an API built on top of, and accessible through, JavaScript. I didn’t really want to get into teaching all the DOM API stuff at this early stage.

But, it is really hard to do anything useful and tangible with client-side JavaScript, if you don’t touch the DOM in at least some way.

So I’ve not taught any DOM API stuff explicitly at this point in the course, but I have made reference to it, albeit it, as little as possible. Again, I wanted to keep the learning as simple as possible.

But your post here raises an important point — is it OK for me to just say “yes, you should get used to searching for stuff you don’t understand, as it’s a fundamental web developer skill”? (it really is)? Or should I provide more guidance here? I mean, I could explicitly state somewhere that you might not understand all of the stuff used in the examples, but that’s OK, get your Google Fu on…and/or, I could provide some links in the assessment articles to the manipulating documents tutorials I referenced earlier.

I don’t know for sure. Thinking back to before you started doing the tutorials, what help do you think you would have benefitted most from?

1 Like
#7

Thanks for the followup @chrisdavidmills

So far (I started from the beginning and I’m currently on functions), the material was logically self-contained, and except for a bit of googling around I was able to work within the provided resources.

I learned a lot by learning how to google things, but in this particular exercise, I would’ve never even thought to use the DOM API. I

I think introducing hints, or a series of hints, from extremely minor ones to more obvious hints would be useful. Then one could learn the steps between the problem and the solution versus just making jumps that don’t connect.

I think hints could be useful, for example the loops exercise could use something as simple as “you may need to take a look at the DOM API” to solve this problem, and maybe another hint which shows a partial solution?

Thanks for all the feedback/help, i really appreciate it.

#8

Thank you very much for the guidance! I’m a complete beginner in web development and programming as a whole. I have been working through the series from the very beginning for about 3 weeks now (stuck at home in China due to the virus) and it has been an incredible journey. @chrisdavidmills

I’d like to add, that just like @Hassan_Garshasb this exercise was the first time I felt a bit cheated in away.

For every problem thus far there had been a solution within the previously taught material (usually hinted at), but here I feel I was expected to use something that was never explicitly explained.

The problem for me was not that the solution hadn’t been taught yet per se (which would’ve been fine and would’ve encouraged independent problem solving), but that there had been no precedent for such an expectation and I didn’t even think to research something outside of the material covered at this point. Instead I kept banging my head against the problem trying to figure out what I was doing wrong within the constraints of the material.

Thank you again for everything!

#9

Hi @n.nikolov1415, it is really nice to hear for you. I am glad that our course is giving you something useful to do while you are stuck at home. I live in the UK, and we will probably get to the same situation fairly soon.

I’ve been thinking about the problem you and @Hassan_Garshasb came up against, and decided to add in some sections to plant the seed of what you might need for such exercises. Have a look at this: https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Loops#DOM_manipulation_considered_useful

Do you think this helps?

2 Likes
#10

Yes, this is the perfect amount of help. Just knowing that the DOM is needed provides the direction needed to get to solving this problem. Thanks for your effort/help!

1 Like
#11

I apologize if this should not be posted in here - first time using discourse :slight_smile:

I’m having an issue with this same skill test. I put my code in codepen but nothing happens…I have no idea why!

Thank you so much in advance!!

https://codepen.io/nerissa-wadey/pen/ZEKEwKo

Anna

#12

Hello @everythingisnot

you are very close to get it

  1. you need to copy the starting point of the code from here

so the html panel would looks like that

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Loops: Task 1</title>
  
  </head>

  <body>

    <section class="preview">



    </section>

  </body>

    
</html>

and css part same as you did

and the js part

 let myArray = ['tomatoes', 'chick peas', 'onions', 'rice', 'black beans'];
    let list = document.createElement('ul');

    // Add your code here

    // Don't edit the code below here!

    const section = document.querySelector('section');
    section.appendChild(list);

by the way you forget to copy the last part of the code
you missed that

  // Don't edit the code below here!

    const section = document.querySelector('section');
    section.appendChild(list);

add this part after your code in the js panel and fix the html panel and it will work
hope that help and have a nice day :slight_smile:

#13

Thank you so much!!! Wish I understood why that worked haha but hopefully soon I will :slight_smile:

#14

you very welcome

why it work

  1. your old html panel code had only ul tag it does not had the section tag
  2. and your js missed that part
const section = document.querySelector('section');  // this line get reference to the section tag in the page you will learn about that later on the js course
    section.appendChild(list); // this line add list element be child of the section so in other way it do this
<section>
<ul>
</ul>
</Section> and you will learn about that also in future lessons

and keep the good work and you will get there soon and have a nice day :slight_smile: