2

Получаю коллекцию 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>

1 ответ 1

4

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>

2
  • Заметили сколько ошибок и опечаток в исходнике? Есть подозрение, что ник автора - ZdraviSmisl - не соответствует :)
    – UModeL
    8 дек 2020 в 13:37
  • 1
    Частенько, захожу за рамки) 8 дек 2020 в 13:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.