Udemy appendChild exercise

Hello. I’m going over my past Udemy courses and I’m having trouble understanding the looping part of this. Maybe I just don’t remember how to write them or which one to use for this particular exercise.

The instructions.

100 Button Insanity Exercise

Without touching index.html, please use JavaScript to create exactly 100 new button elements! Add each new button inside the container element provided in index.html. Unfortunately, Udemy’s exercise tool does not support to the append method, so you will need to use appendChild. Here are the steps:

Create exactly 100 new button elements

Each button must have some text inside of it (it doesn’t matter what)

Each button must be appended inside the container div.

Template HTML



<!DOCTYPE html>

<head>
    <title>100 Buttons!</title>
</head>

<body>
    <!--DO NOT TOUCH THIS FILE PLEASE!-->
    <h1>Look At All My Buttons!</h1>
    <div id="container">
    
    </div>
    

    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>
        <button>Hi there</button>
    <button>Hi there</button>


   
</body>

</html>
    >
    
    </div>
</body>

</html>

And the JS code is waiting. I only obviously have the buttons setup for now.

I am not sure what the question means.

Where is the loop?

so you can delete all buttons from HTML, I think?

You may use for loop here, because you need to repeat one same thing 100 times - adding some button inside the div

Search on MDN:
document.getElementById
document.createElement
appendChild

I think that should be enough.

This task is kind of strange. Why 100? To learn this stuff, exercise with 5 or 6 buttons should be enough…

1 Like

There isn’t one because I don’t know which to use or write one. lol

If you do not know how to write a for loop, then you probably need to learn some basic JavaScript first before proceeding with the problem at hand.

1 Like

Complete guess but the reason for 100 instead of 5 is because people will try to skip using a loop in their code if you say 5 (they prefer to type out 5 elements).

1 Like

Makes sense.
But in the original post we can see that people can create 100 buttons to skip the loop part :upside_down_face:

You can do it in many different ways. I’d suggest you try something and post your code if you need help with it.


As you haven’t posted any code, just as an example, here is one way of doing it (doubt you are expected to do it this way).

  1. Get the container.

  2. Create a button element and give it some text.

  3. Create an array of size 100 and fill it with the button element.

  4. Loop the array and append the buttons to the container. The element will have to be cloned.

Example code
const container = document.querySelector('#container');

const button = document.createElement('button');
button.textContent = 'Click me';

new Array(100).fill(button).forEach((button) => {
  container.appendChild(button.cloneNode(true));
});