Add and subtract values from various input’s after created or removed with appendchild and removeChild.

Question

Well my problem is this, with the appendchild of Javascript I create an input with X value with its own ID but can be random, and add another with the same method with the same situation of the other but with different value (Taking into account that X is a numerical value), well, my problem is I don’t know how I’m going to add or subtract these input’s by having random id’s as they are created or removed. I am grateful if you can help me. Follow below the code I use to create:

function adicionar(conteudo) {
  var node = document.createElement("input");
  dados = conteudo.split('|'); //separa a id do valor e cria um array nos dados
  node.setAttribute("id", dados[0]); //insere a id
  node.setAttribute("type", "text"); //insere o tipo
  node.setAttribute("value", dados[1]); //insere o valor
  document.getElementById("lista").appendChild(node); //escreve na div
}

<div id="lista"></div>
<!--a esquerda a id a direia o valor-->
<button onclick="adicionar('1|5');">adicionar input 1</button>
<button onclick="adicionar('2|7');">adicionar imput 2</button>

Answer 1

This way you are inserting fields with ids equal (1 or 2).

Gere idsingle s counting the number of fields. And don’t just use a number like id, include a string together. In my example below, I am generating ids: campo0, campo1, campo2 etc...

function adicionar(conteudo) {
  var node = document.createElement("input");
  var novo_id = document.querySelectorAll("#lista input").length;
  node.setAttribute("id", "campo"+novo_id); //insere o id
  node.setAttribute("type", "text"); //insere o tipo
  node.setAttribute("value", conteudo); //insere o valor
  document.getElementById("lista").appendChild(node); //escreve na div
}

<div id="lista"></div>
<button onclick="adicionar('5');">adicionar input 1</button>
<button onclick="adicionar('7');">adicionar imput 2</button>

To add or subtract you can take two or more fields by the respective id. Or if you’re going to use them all, you can select them all at once with document.querySelectorAll("#lista input") and tie a bow for:

function somarTudo(){
   var campos = document.querySelectorAll("#lista input");
   var soma = 0;
   for(var x=0; x<campos.length; x++){
       soma += parseInt(campos[x].value);
   }

   return soma;
}

To get the summed values, just call the function somarTudo().