Как сложить значения input'ов?

Question

[Андрей Кузнецов]

Есть таблица:

<table>
  <tbody>
    <tr class="heading">
      <td>№</td>
      <td>ID склада</td>
      <td>Название</td>
      <td>Адрес</td>
      <td>Количество товара</td>
    </tr>
    <tr>
      <td style="text-align:center;"><a href="/bitrix/admin/cat_store_edit.php?ID=4&amp;lang=ru">1</a></td>
      <td style="text-align:center;">4</td>
      <td style="text-align:center;">Главный склад</td>
      <td style="text-align:center;">Сочи</td>
      <td style="text-align:center;"><input type="text" id="AR_AMOUNT_4" name="AR_AMOUNT[4]" size="12" value="66"><input type="hidden" name="AR_STORE_ID[4]" value="4"></td>
    </tr>
    <tr>
      <td style="text-align:center;"><a href="/bitrix/admin/cat_store_edit.php?ID=5&amp;lang=ru">2</a></td>
      <td style="text-align:center;">5</td>
      <td style="text-align:center;">ДляСайта</td>
      <td style="text-align:center;"><a href="/bitrix/admin/cat_store_edit.php?ID=5&amp;lang=ru">(изменить)</a></td>
      <td style="text-align:center;"><input type="text" id="AR_AMOUNT_5" name="AR_AMOUNT[5]" size="12" value="77"><input type="hidden" name="AR_STORE_ID[5]" value="5"></td>
    </tr>
    <tr>
      <td style="text-align:center;"><a href="/bitrix/admin/cat_store_edit.php?ID=6&amp;lang=ru">3</a></td>
      <td style="text-align:center;">6</td>
      <td style="text-align:center;">Склад Во</td>
      <td style="text-align:center;">Во</td>
      <td style="text-align:center;"><input type="text" id="AR_AMOUNT_6" name="AR_AMOUNT[6]" size="12" value="22"><input type="hidden" name="AR_STORE_ID[6]" value="6"></td>
    </tr>
    <tr>
      <td style="text-align:center;"><a href="/bitrix/admin/cat_store_edit.php?ID=7&amp;lang=ru">4</a></td>
      <td style="text-align:center;">7</td>
      <td style="text-align:center;">Импорт77</td>
      <td style="text-align:center;"><a href="/bitrix/admin/cat_store_edit.php?ID=7&amp;lang=ru">(изменить)</a></td>
      <td style="text-align:center;"><input type="text" id="AR_AMOUNT_7" name="AR_AMOUNT[7]" size="12" value="44"><input type="hidden" name="AR_STORE_ID[7]" value="7"></td>
    </tr>
  </tbody>
</table>

Надо сложить значения input'ов.

const sbor = document.querySelectorAll('[name^=AR_AMOUNT]');

for (let i = 0; i < sbor.length; i++) {
  const elem = sbor[i];
  const alla = new Array(elem.value);
  console.log(alla);
}

Comments

[Алан Гибизов]

Пользуйтесь плюсиком в редакторе вопроса!
Будет вот так красиво:

Answer 1

[0xD34F]

Кого складываем:

const elements = document.querySelectorAll('[name^=AR_AMOUNT]');

Нормальный способ - перебираем коллекцию элементов (цикл в явном виде или с помощью методов массива), достаём значения, складываем:

const sum = Array.prototype.reduce.call(
  elements,
  (acc, n) => acc + +n.value,
  0
);

// или

let sum = 0;
for (const { value } of elements) {
  sum += Number(value);
}

Ненормальный способ - рекурсия. Функция получает коллекцию элементов и индекс, если элемент с указанным индексом существует, возвращаем его значение плюс результат рекурсивного вызова с индексом, увеличенным на единицу; если элемента нет - возвращаем 0:

const sum = (function sum(arr, i) {
  return arr[i] ? parseFloat(arr[i].value) + sum(arr, i + 1) : 0;
})(elements, 0);

Дикий способ - сами ничего считать не будем. Выдёргиваем из коллекции элементов значения; склеиваем их, используя в качестве разделителя символ +, в строку; строку отдаём в eval; всё, сумма получена (ну, почти, если исходная коллекция элементов была пуста, то строка тоже будет пустой, так что надо не забыть подставить 0 вместо возможного undefined, который является результатом выполнения пустой строки):

const sum = eval(Array.from(elements, n => n.value).join('+')) ?? 0;

Answer 2

[Yagher]

let sum = 0;
for (let i = 0; i < sbor.length; i++) {
  sum += Number(sbor[i].value);
}
console.log(sum);

Answer 3

[defriz]

const alla = [...document.querySelectorAll('[name^=AR_AMOUNT]')].map(x => Number(x.value)).reduce((_, i) => _ + i, 0);