How ToJavaScriptMake Web StoriesQuiz GeneratorFAQ Schema GeneratorTable Maker3schools TranslateMore Tools..
Apu
Apu 10/30/2022

How to create multiple buttons dynamically in javascript

In this article, you will learn how to create multiple buttons dynamically in javascript.

To create only one button in javascript, it's easy but for creating multiple buttons dynamically in javascript, we have to use a loop for loop.

Basically, a loop repeats the same code over and over again.

Create multiple buttons dynamically in javascript.

We will create a <div> element to display the created buttons and also create a <button> element whenever the button will be clicked , a function myFunction() will be involved.

Demo : create multiple buttons in js
<div id="button-container"></div>
<button onclick="myFunction(4)">Create Button</button>
<script>
function myFunction(e){
    for(let i = 0; i< e; i++){
      let newBtn = document.createElement('button');
      newBtn.innerText="Click me";
      document.querySelector('#button-container').appendChild(newBtn);
    }
  }
</script>
Try it Yourself »
  1. Create a <div> element with an id id="button-container" where the created buttons will be displayed.
    <div id="button-container"></div>
  2. Create a <button> element with the onclick attribute. Write down the function name inside the double quotes. Don't forget to add the opening and the closing circular brackets after the function name and also pass a number as an argument.
    <button onclick="myFunction(5)">Create Button</button>
  3. Now , write down the myFunction inside the <script> tag.
  4. Inside the myFunction, add a for-loop that will repeat 5 times.
    function myFunction(e){
        for(let i = 0; i< e; i++){
          
        }
      } 
    We passed a parameter e inside the function myFunction(e). The parameter e returns the value passed inside the button element.
  5. Inside the for loop, create a button using the createElement() method. How to create a button
     function myFunction(e){
        for(let i = 0; i< e; i++){
          let newBtn = document.createElement('button');
          newBtn.innerText="Click me";
        }
      }
  6. Finally, append the created buttons to the <div> element as a child.
     function myFunction(e){
        for(let i = 0; i< e; i++){
          let newBtn = document.createElement('button');
          newBtn.innerText="Click me";
          document.querySelector('#button-container').appendChild(newBtn);
        }
      }

Click on the Try it Yourself » button to open the code in Editor.

Example : create multiple buttons dynamically
Try it Yourself »
Share

How to create multiple buttons dynamically in javascript

1
In this article, you will learn how to create multiple buttons dynamically in javascript.
asked
1 answers

1 Answers

Related Posts (More answers below)
  1. For using multiple times let's create a function where we will create a button using the createElement() method and return the created button element. In this way, whenever you need a button element, you are able to call the createButton() function. 
    function createButton(btnText){
    let myBtn = document.createElement('button');
    myBtn.innerText = btnText;
    return myBtn
    }

    console.log(createButton('hi'))

    Reply Delete
    Share
Write an answer
back