2

Нужно сложить значения неизвестного кол-ва input. Сумму вывести в другой input.
В ещё один input вывести через запятую все значения input, которые суммировали

<input class="input-small" value="2">
<input class="input-small" value="5">
<input class="input-small" value="3">
...... - кол-во может быть разным

<input id="sum" value=""> - тут сумма
<input id="vse" value=""> - тут все значения суммированных input по порядку через запятую

2 ответа 2

4

let sum   = document.getElementById('sum');
let all   = document.getElementById('all');

let small = document.querySelectorAll('.input-small'); 
let numbers = []; // Массив, куда запишутся все значения инпутов

for( let i = 0; i < small.length; i++ ){
  numbers.push( small[i].value ); // (*1)
  
  small[i].addEventListener('input', function(){
    numbers[i] = this.value; 
    // При вводе чисел в любом инпуте, не будем пересобирать все значения, 
    // а только изменим конкретный элемент массива. 
    // this - указывает на инпут, в котором печатают (который запускает эту функцию)

    // Все значения в массиве обновлены, можно обновить и результаты:
    updateResults();
  });
}
updateResults();

/************/

function updateResults(){
  sum.value = sumArr( numbers );
  all.value = numbers.join(', ');
}

function sumArr(arr){
  let x = 0;
  for( let i = 0; i < arr.length; i++ ){
    x += +arr[i]; // (*2)
  }
  return x;
}
input {margin: 2px 0;}
<input class="input-small" value="2"><br>
<input class="input-small" value="5"><br>
<input class="input-small" value="3"><br>
<button id="ok">ok</button><br>

<input id="sum" value=""><br>
<input id="all" value="">

(*2): arr[i] - это small[i].value, вставленное в массив в строчке (*1). А это строка.
Т.е. 0 + '2' == '02'. Чтобы не было этой ошибки, нужно превратить его в число. Можно было бы Number( small[i].value ) но есть короткий вариант - поставить плюсик перед ней.

А x += число то же самое, что x = x + число

4
  • Спасибо! А нереально сделать, чтобы без нажатия кнопки (меняешь значение в исходном input и сразу пересчитывается сумма и значения подставляются в all?
    – user305361
    31 авг 2019 в 18:14
  • @user305361 Отредактировано) 31 авг 2019 в 18:33
  • И подскажите пожалуйста как переписать, чтобы считались числовые поля <input class="input-small" type="number" value="" min="0" max="10">. Если вводить число вручную, то пересчитывает, а если пользоваться стрелками поля, то скрипт не воспринимает такое изменение value.
    – user305361
    31 авг 2019 в 19:23
  • small[i].addEventListener('input', function(){ numbers[i] = this.value; updateResults(); }); — эту строчку можно повторить, только заменив событие input на change 31 авг 2019 в 19:29
0

Решил сократить и протестировать.

let priceInputs = document.querySelectorAll('.js-p-input');
let arrNumbers = [];

priceInputs.forEach((item, inx) => {
  
  //arrNumbers.push(item.value);//убрав, при вводе в 10й input получим [,,,,,,,,,1]
  item.addEventListener('input', function(e) {
    this.value = this.value.replace(/\D/g, '');//лочим всё кроме цифр.
    arrNumbers[inx] = this.value;

    console.time()
    let sum1 = getSumInputs(arrNumbers);
    console.timeEnd()

    console.time()
    let sum2 = sumArr(arrNumbers);
    console.timeEnd()
  });
});


function getSumInputs(arr){//[,,,,,,,,,1] reduce совершит 1 итерацию
  return arr.reduce((prev, num) => {
    console.dir('Итераций Reduce'); 
    return (prev += +num)
  }, 0);
}
 //ради сокращённой записи arr.reduce((prev, num) => (prev += +num), 0);
function sumArr(arr){//[,,,,,,,,,1] совершит 10 итераций
  let x = 0;
  for( let i = 0; i < arr.length; i++ ){
    console.log('Итераций for'); 
    x += +arr[i]; 
  }
  return x;
}
input{
  display: block;
}
input+input{
  margin-top: 3px;
}
  <input class="js-p-input" type="text"  placeholder='1'>
  <input class="js-p-input" type="text"  placeholder='2'>
  <input class="js-p-input" type="text"  placeholder='3'>
  <input class="js-p-input" type="text"  placeholder='4'>
  <input class="js-p-input" type="text"  placeholder='5'>
  <input class="js-p-input" type="text"  placeholder='6'>
  <input class="js-p-input" type="text"  placeholder='7'>
  <input class="js-p-input" type="text"  placeholder='8'>
  <input class="js-p-input" type="text"  placeholder='9'>
  <input class="js-p-input" type="text"  placeholder='10'>

введите сюда описание изображения

Ваш ответ

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

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