Udemy appendChild exercise

JavaScript
1

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.

2

I am not sure what the question means.

Where is the loop?

3

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
4

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

6

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
7

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

8

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.