Сумма HTMLcolection через reduce

Question

Получаю коллекцию 3х инпутов через getElementsByClassName и неправильно получаю сумму значений с инпутов..Поправьте пожалуйста

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<input class="number" type="text" placeholder="enter a number" style="display: block"/>
<input class="number" type="text" placeholder="enter a number" style="display: block"/>
<input class="number" type="text" placeholder="enter a number" style="display: block"/>

<input id="test" type="text" placeholder="display sum" style="display: block"/>
    <button>Get sum</button>
<body>

</body>

<script>
let button=document.querySelector("button")
let inputs=document.getElementsByClassName('number')
let amount=document.getElementById('test')

button.addEventListener('click',()=>{
 
let sum=Array.prototype.reduce.call(inputs,(s,input)=>
s+parseInt(input.value)
)
    console.log(sum)
amount.value=sum
})
</script>

</html>

Answer 1

let button = document.querySelector("button")

button.addEventListener('click', () => {
  let inputs = document.getElementsByClassName('number');
  let amount = document.getElementById('test');

  let sum = Array.from(inputs).reduce(
    (s, input) => s += parseInt(input.value), 0);

  amount.value = sum;
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <input class="number" type="text" placeholder="enter a number" style="display: block" />
  <input class="number" type="text" placeholder="enter a number" style="display: block" />
  <input class="number" type="text" placeholder="enter a number" style="display: block" />

  <input id="test" type="text" placeholder="display sum" style="display: block" />
  <button>Get sum</button>

</body>

</html>

БЛОГ НА HUSL

Сумма HTMLcolection через reduce

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