Как правильно вывести сумму?

Question

в спан попадает 9

а не 4

let button = document.querySelector('button');
let elems = document.querySelectorAll('input');
let span = document.querySelector('span');

button.addEventListener('click', function() {
  elems.forEach(function(item) {
    console.log(Number(item.value));
    span.innerHTML = Number(item.value) * Number(item.value);
  })

})

<input type="text" value="1">
<input type="text" value="3">
<button>click</button>
<span>0</span>

Answer 1

button.addEventListener('click', function() {
  let sum = 0;
  elems.forEach(function(item) {
    sum += Number(item.value);
    console.log(sum);
  })
  span.innerText = sum;
})

Answer 2

let button = document.querySelector('button');
let elems = document.querySelectorAll('input');
let span = document.querySelector('span');

button.addEventListener('click', function() {
  let sum = 0;
  for (let i = 0; i < elems.length; i++) {
    sum += Number(elems[i].value);
  }
  span.innerHTML = sum;
})

<input type="text" value="1">
<input type="text" value="3">
<button>click</button>
<span>0</span>

Answer 3

button.addEventListener('click', function() {
  const sum = elem.reduce(function(result, item) {
    return (result + item.value);
  }, 0);
  span.innerHTML(sum);
});

Answer 4

let button = document.querySelector('button');
let elems = document.querySelectorAll('input');
let span = document.querySelector('span');

button.addEventListener('click', function() {
  span.textContent = Array.from(elems).reduce((sum, elem) => {
    return sum + +elem.value;
  }, 0);
});

<input type="text" value="1">
<input type="text" value="3">
<button>click</button>
<span>0</span>

БЛОГ НА HUSL

Как правильно вывести сумму?

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