Суммировать значения input

106

30 июня 2021, 01:40

Нужно сложить значения неизвестного кол-ва 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 по порядку через запятую

Answer 1

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 + число

Answer 2

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

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'>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не могу избавиться от полей вокруг wrapper

Я хочу сделать слайдер для мобильной версии; Все вроде бы подготовил, но сталкиваюсь с тем, что по левую и правую стороны от wrapper у меня возникает...

119

c++

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

Есть у меня вот такой рабочий файл

379

c++

Поиск слов в .txt файле

Суть моей задачи в том , что надо искать определенные лексемы в файлахЕсли лексема есть, то выводить значение после него

HTML

html css flex-box

Подскажите как расположить изображения ?

280