Добавление входных данных в массив и создание суммы

Question

Итак, моя проблема в том, что у меня есть несколько входов, которые я пытаюсь сложить из них.

Значения go в массив, но мне нужно взять этот массив и создать сумма.

Также у меня есть запуск функции onchange, чтобы сумма обновлялась.

Вот что у меня сейчас: https://codepen.io/DilionsCode/pen/vYGEXOm

var sum;
function Geeks() {
  var input = document.getElementsByName("fields[]");
  // ForLoop
  input.forEach(Add);
}
function Add(item, index) {
   var sum = sum + item;
}

Answer 1

Обновление состояния глобальной переменной не считается оптимальным.

function Geeks() {
  var input = document.getElementsByName("fields[]");
  let sum = 0;
  // ForLoop
  input.forEach((index, item) => {
   sum = sum + Number(item.value);
  });
}

Answer 2

Выполните итерацию с forEach по полям ввода и просуммируйте значения. parseInt необходим, потому что значения являются строками.

function Geeks() {
  let input = document.getElementsByName("fields[]");
  let sum = 0;
  input.forEach(elem =>  sum += parseInt(elem.value));
  document.getElementById('score').innerHTML = 'Score: ' + sum;
}

// Initialize sum at start
Geeks();

<select name="fields[]" onchange="Geeks()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select name="fields[]" onchange="Geeks()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<p id="score">Score:</p>

Answer 3

Вы не должны повторно объявлять переменную sum внутри функции, а вместо этого увеличивать глобальную переменную. Кроме того, вы должны суммировать value элементов select.

function Add(item, index) {
  sum = sum + Number(item.value);
}

Живой пример:

var sum;
function Geeks() {
  var input = document.getElementsByName("fields[]");
  // ForLoop
  sum = 0;
  input.forEach(Add);
  document.querySelector('#score').textContent = "Score: " + sum;
}
function Add(item, index) {
   sum = sum + Number(item.value);
}

<select name="fields[]" onchange="Geeks()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select name="fields[]" onchange="Geeks()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<p id="score">Score: 2</p>