how to create a grid container of buttons by using for() in javascript?

Question

I'm very new to HTML and javascript but I need to create a grid container of buttons in which the text displayed on the button is an element in a list. in other words, I need each button's text to be different from one another. I was thinking to use a for loop but I'm not sure that's the way to go. I started with making the text of all buttons similar but it still isn't working. any help or advice at this point will be greatly appreciated!!

.categories-buttons {
    display: grid;
    grid-template-columns: 80px 80px 80px 80px 80px;
}


.item {
    padding: 10px;
}

<div class="categories-buttons">
    <button id="demo" class="item"></button>
      <script>
        for (var i = 0; i < 20; i++) {
            document.getElementById("demo")(7);
        }
    </script>
</div>

try w3schools.com/bootstrap/bootstrap_button_groups.asp

Engineer S. Saad
– Engineer S. Saad

2020-05-20 10:46:49 +00:00
Commented May 20, 2020 at 10:46 — Engineer S. Saad
– Engineer S. Saad, Commented May 20, 2020 at 10:46

gogara91 · Accepted Answer · 2020-05-20 11:18:01Z

Lets assume your list is an array of elements:

    // This is javascript array of objects, each object has 1 property - buttonText.
    // You can add more properties.
    const elements = [
        { buttonText: 'Button 1' },
        { buttonText: 'Button 2' },
        { buttonText: 'Button 3' }
    ];
    // Get parent div in which you want to add buttons
    const parent = document.getElementById('buttons-container');
    
    // In for loop, set "i" to be lower than number length of array.
    for(let i = 0; i < elements.length; i++) {
        // Create button node and add innerHTML (innerHTML is stuff that goes between <></> tags).
        // Since "elements" is an array, you select current iteration of it with [i]
        let button = document.createElement('button');
        button.innerHTML = elements[i].buttonText;
        parent.appendChild(button);
    }

<div id="buttons-container"></div>

Pablo CG · Accepted Answer · 2020-05-20 10:54:05Z

0

Something like this?

.categories-buttons {
    display: grid;
    grid-template-columns: 80px 80px 80px 80px 80px;
}


.item {
    padding: 10px;
}

<div class="categories-buttons">
</div>

<script type="text/javascript">
    var div = document.getElementsByClassName("categories-buttons")[0];
        
    for (var i = 0; i < 20; i++) {
        var btn = document.createElement("button");
        btn.innerText = "Button " + i;
        div.append(btn);
    }
</script>

answered May 20, 2020 at 10:54

Pablo CG

8166 silver badges19 bronze badges

Collectives™ on Stack Overflow

how to create a grid container of buttons by using for() in javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related