index not incrementing in input field

Question

I have a button that creates two input fields on click. I want to add a unique id for each couple of inputs that is created so that I can delete them later. Currently when I add the inputs they all have the same id 0 and the index does not increment, why and how can I make it increment? Here is my code:

 createNewPricedRoundShareholder() {

  
    const mainParent = document.getElementById('main-parent');
    var index = 0;

    const newPlatformNameInput1 = document.createElement("input");
  newPlatformNameInput1.id = index + '_first';
  newPlatformNameInput1.value = index;
  const newPlatformNameInput2 = document.createElement("input");
  newPlatformNameInput2.id = index + '_second';
  newPlatformNameInput2.value = index;
  const deleteButton = document.createElement("button");
  deleteButton.innerText = 'delete';
  const wrapperParent = document.createElement('div');
  wrapperParent.id = index + '_parent';
  wrapperParent.appendChild(newPlatformNameInput1);
  wrapperParent.appendChild(newPlatformNameInput2);
  wrapperParent.appendChild(deleteButton);  mainParent.appendChild(wrapperParent);
  index++;
    

    }

and my html:

<div id="main-parent"></div>

I have it in my code and it still doesn't increment correctly — user14543107
– user14543107, Commented Nov 30, 2020 at 15:52
Check this link : stackoverflow.com/questions/42159685/… and stackoverflow.com/questions/19994281/… it may solve your problem — Christian LSANGOLA
– Christian LSANGOLA, Commented Nov 30, 2020 at 15:56
Your index is local to the function so it always resets to 0 when you call it. At the end you increment it to 1 but that has no effect. You have to declare var index = 0 outside the function. — Kokodoko
– Kokodoko, Commented Nov 30, 2020 at 15:58

imvain2 · Accepted Answer · 2020-11-30 16:34:09Z

0

I know you said you want an ID so you can use it to delete your row later, but you don't actually need it. If you add this code to your function, you can delete the entire row without the need of using an ID. This code will allow you to target the specific button, then the parent of that button and remove it.

deleteButton.addEventListener("click",function(e){
  e.preventDefault();
  e.target.parentNode.remove();
});

answered Nov 30, 2020 at 16:34

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

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

Comments

Marc Salvetti · Accepted Answer · 2020-11-30 16:55:44Z

0

I think that is because you increase the index at the end of your function but you should increase it after creating the first input and before creating the second one

    [...]
    const newPlatformNameInput1 = document.createElement("input");
    newPlatformNameInput1.id = index + '_first';
    newPlatformNameInput1.value = index;
    index++;
    const newPlatformNameInput2 = document.createElement("input");
    newPlatformNameInput2.id = index + '_second';
    [...]

answered Nov 30, 2020 at 16:55

Marc Salvetti

3621 silver badge10 bronze badges

Collectives™ on Stack Overflow

index not incrementing in input field

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related