Как посчитать сумму двух полей в динамических создаваемых input полях? Javascript

Question

Всем привет! Есть динамическая таблица, в которую можно добавить сколько угодно полей и посчитать сумму каждого из полей. Я новичок в javascript, поэтому опыта конечно не хватает, мои мысли как решить эту задачу склоняются в сторону цикла, или как то записать сумму каждой итерации в массив и после уже вывести сумму каждой пары чисел. Задача такая, посчитать сумму Число[1] + Число[2], для всех возможных input полей, т.е. если будет добавлено 10 динамических полей, в ответе должно получится 10 полей с суммами.
Буду очень благодарен если, подскажите в каком направлении действовать, чтоб решить эту задачу.

var d = document;
var last_id = 0;

function add_value_f() {

  // находим нужную таблицу
  var tbody = d.getElementById('table').getElementsByTagName('tbody')[0];

  // создаем строку таблицы и добавляем ее
  var row = d.createElement("tr");
  tbody.appendChild(row);

  // создаем ячейки в вышесозданной строке
  var td1 = d.createElement("td");
  var td2 = d.createElement("td");


  row.appendChild(td1);
  row.appendChild(td2);

  last_id = last_id + 1;

  // добавляем формы ввода в ячейки
  td1.innerHTML = '<input type="number" min="0" id="chislo[' + last_id + ']" class="data">';
  td2.innerHTML = '<input type="number" min="0" id="chislo2[' + last_id + ']" class="data">';
};

function totalSum() {
  var num1 = document.getElementById('chislo[' + last_id + ']').value;
  var num1p = parseInt(num1);
  if (isNaN(num1p)) {
    num1p = 0;
  }

  var num2 = document.getElementById('chislo2[' + last_id + ']').value;
  var num2p = parseInt(num2);
  if (isNaN(num2p)) {
    num2p = 0;
  }

  var sum;
  sum = num1p + num2p;
  out.innerHTML = " " + sum + "<br>";

}

<div class="stats-tab">
  <h1> Таблица</h1>
  <table id="table">
    <thead>
      <tr>
        <th class="data">Число 1</th>
        <th class="data">Число 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="number" id="chislo[0]" min="0" class="data"></td>
        <td><input type="number" id="chislo2[0]" min="0" class="data"></td>
      </tr>
    </tbody>
  </table>
</div>
</div>
<div class="col-12">
  <input type="button" onclick="add_value_f()" value="Добавить" />
</div>
</div>
<button onclick="totalSum()">=</button>
<hr>
<h1>Результаты:</h1>
<div id="out"></div>

Answer 1

Вам нет необходимости генерировать уникальные id инпутам, потому как ваш якорный элемент - это ряд. Собрали все ряды, прошли по каждому ряду и посчитали суммы в инпутах.

const table = document.getElementById('table');
const tbody = table.lastElementChild; // почти надежно, но можно по старинке селектором забрать боди

// функция отдаст массив чисел, выводите в каком угодно виде
function sumUp() {
    const sumArr = new Array(tbody.children.length);
    for (let i = 0, sum = 0; i < sumArr.length; i++, sum = 0) {
        tbody.children[i]
            .querySelectorAll('input[type=number]')
            .forEach(({ value }) => sum += +value);
        sumArr[i] = sum;
    }
    return sumArr;
}

Answer 2

let test = 1;

_id("append").addEventListener("click", function () {
  let tbody = document.querySelector("#table tbody");

  let tr = `<tr>
    <td><input type="number" min="0" class="data" value="${ test++ }"></td>
    <td><input type="number" min="0" class="data" value="${ test++ }"></td>
  </tr>`;
  
  tbody.insertAdjacentHTML("beforeEnd", tr);
});

_id("count").addEventListener("click", function() {
  let inp = document.querySelectorAll("#table input.data");
  
  let result = [];
  for( let i = 0; i < inp.length; i += 2 ) {
    result.push( Number(inp[i].value) + Number(inp[i+1].value) );
  }
  
  _id("out").innerHTML = result.join("<br>");
});

/***/
function _id(str) {
  return document.getElementById(str);
}

<table id="table">
  <tr>
    <td><input type="number" min="0" class="data"></td>
    <td><input type="number" min="0" class="data"></td>
  </tr>
</table>

<button id="append">Добавить</button>
<button id="count">=</button>
<hr>
<h1>Результаты:</h1>
<div id="out"></div>

"#table input.data" — все инпуты с классом "data", которые находятся внутри id="table".

Ну а в конце цикла не обязательно должен быть i++. Туда можно добавить любой кусок кода (даже функцию), которая будет выполняться на каждой итерации:

for( let i = 1; i < 1024; console.log( "Оппа!", i = i * 2 ) );
// Для демо. В реальном коде не надо так!)
// Можно переписать:

for( let i = 1; i < 1024; i *= 2 ) {
  // console.log( i );
};

БЛОГ НА HUSL

Как посчитать сумму двух полей в динамических создаваемых input полях? Javascript

Ответы (2 шт):