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