How to add a repeated element based on button click using javascript?

Question

How to add a repeated element using a button click example code is given bellow I am not able to set proper event that can add multiple div element based on click.

   const Form =  document.createElement('form)
   const Input = document.createElement('input')   
   const Button = document.createElement('button')     
   const NewDiv = document.createElement('div').className = "repeatedBlock" 

   NewDiv.append(Input)
   NewDiv.append(Button)
   Form.append(NewDiv)
    
   Button.onclick = function changeContent() {
      // append multiple NewDiv in the Form element based on every click
   }

Dhara · Accepted Answer · 2021-08-20 18:31:49Z

1

In this code, I have created a form, then call a function which creates div and bind event inside it. Let me know if required more details on this. Change name, provide id to each field. These are up to you.

const Form =  document.createElement('form');
Form.id = "form";  
document.body.appendChild(Form);
     const Button = document.createElement('button') ; 
Button.textContent ="Click";
Button.addEventListener("click", function(e){ e.preventDefault(); createDiv() });
Form.appendChild(Button);
createDiv();

function createDiv() {
var i = document.getElementById('form');
  const NewDiv = document.createElement('div');
  const Input  = document.createElement('input')   ;

  NewDiv.append(Input);   
i.appendChild(NewDiv);

}

edited Aug 20, 2021 at 18:31

answered Aug 20, 2021 at 2:19

Dhara

1,9722 gold badges19 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jax Over a year ago

Thanks a Lot, Your solution worked perfectly. Is there a way we have only one Button instead of multiple copies?

nxt · Accepted Answer · 2021-08-21 03:38:38Z

1

Only a single Button

const Form =  document.createElement('form');
const Button = document.createElement('button')  
document.body.appendChild(Form);
Button.innerHTML = "Go";
Button.classList.add("formBtn");
window.onload = generateNew;
Form.appendChild(Button)

var x = 0;
function generateNew(e){
   x++;
   e.preventDefault();
   
   const Input  = document.createElement('input')   
      
   const NewDiv = document.createElement('div')
   NewDiv.classList.add( "repeatedBlock" );
   Input.value = "Input #"+x;

   NewDiv.append(Input);
   Form.append(NewDiv);
   
   setEvents();
}
function setEvents(){
   var Buttons = document.querySelectorAll(".formBtn");
   for(i = 0; i < Buttons.length; i++){
      Buttons[i].addEventListener("click", generateNew);
   }
}

edited Aug 21, 2021 at 3:38

answered Aug 20, 2021 at 10:46

nxt

4363 silver badges14 bronze badges

2 Comments

jax Over a year ago

Thanks, it's perfect accept I don't want to create multiple buttons.

nxt Over a year ago

@jax Answer Updated

Collectives™ on Stack Overflow

How to add a repeated element based on button click using javascript?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related