Помогите упростить скрипт

[Dmitriy8804]

Добрый день. Я - начинающий программист. Не пожскажете как сократить такой код. скрипт нужен для вычисления стоимости электромонтажных работ на сайте.


function calcCost(){
//создаем массив, в котором храним данные, в которые ниже присвоим
//стоимость отдельных работ.
var arrResult = ['result1', 'result2', 'result3', 'result4', 'result5',
'result6', 'result7', 'result8', 'result9', 'result10', 'result11',
'result12', 'result13', 'result14', 'result15', 'result16', 'result17',
'result18','result19', 'result20', 'result21', 'result22', 'result23',
'result24', 'result25', 'result26', 'result27', 'result28', 'result29',
'result30']; //создаем массив, в кот. храним все пункты работ
//присваиваем каждому элементу массива элемент из html, умножаем на суму стоимости работы и преобразуем строку в число


arrResult[0] = parseInt(document.getElementById('input1').value * 16);
arrResult[1] = parseInt(document.getElementById('input2').value * 50);
arrResult[2] = parseInt(document.getElementById('input3').value * 11);
arrResult[3] = parseInt(document.getElementById('input4').value * 8);
arrResult[4] = parseInt(document.getElementById('input5').value * 12);
arrResult[5] = parseInt(document.getElementById('input6').value * 7);
arrResult[6] = parseInt(document.getElementById('input7').value * 6);
arrResult[7] = parseInt(document.getElementById('input8').value * 55);
arrResult[8] = parseInt(document.getElementById('input9').value * 38);
arrResult[9] = parseInt(document.getElementById('input10').value * 65);
arrResult[10] = parseInt(document.getElementById('input11').value * 46);
arrResult[11] = parseInt(document.getElementById('input12').value * 36);
arrResult[12] = parseInt(document.getElementById('input13').value * 40);
arrResult[13] = parseInt(document.getElementById('input14').value * 20);
arrResult[14] = parseInt(document.getElementById('input15').value * 40);
arrResult[15] = parseInt(document.getElementById('input16').value * 50);
arrResult[16] = parseInt(document.getElementById('input17').value * 20);
arrResult[17] = parseInt(document.getElementById('input18').value * 300);
arrResult[18] = parseInt(document.getElementById('input19').value * 200);
arrResult[19] = parseInt(document.getElementById('input20').value * 38);
arrResult[20] = parseInt(document.getElementById('input21').value * 48);
arrResult[21] = parseInt(document.getElementById('input22').value * 58);
arrResult[22] = parseInt(document.getElementById('input23').value * 68);
arrResult[23] = parseInt(document.getElementById('input24').value * 75);
arrResult[24] = parseInt(document.getElementById('input25').value * 115);
arrResult[25] = parseInt(document.getElementById('input26').value * 80);
arrResult[26] = parseInt(document.getElementById('input27').value * 100);
arrResult[27] = parseInt(document.getElementById('input28').value * 170);
arrResult[28] = parseInt(document.getElementById('input29').value * 75);
arrResult[29] = parseInt(document.getElementById('input30').value * 90);
arrResult[30] = parseInt(document.getElementById('input31').value * 40);

var resultCommon = arrResult[30] + arrResult[29] + arrResult[28] +
arrResult[27] + arrResult[26] + arrResult[25] + arrResult[24] + arrResult[23] +
arrResult[22] + arrResult[21] + arrResult[20] + arrResult[19] + arrResult[18] +
arrResult[17] + arrResult[16] + arrResult[15] + arrResult[14] + arrResult[13] +
arrResult[12] + arrResult[11] + arrResult[10] + arrResult[9] + arrResult[8] +
arrResult[7] + arrResult[6] + arrResult[5] + arrResult[4] + arrResult[3] +
arrResult[2] + arrResult[1] + arrResult[0];
//складываем все работы

var oi = document.getElementById('out');
oi.textContent = resultCommon + ' ГРИВЕН';
};

[Rise]

А чего так много инпутов? Вводить пользователь не устанет?

[j0hnik]

Вот почитайте

циклы
https://learn.javascript.ru/while-for

forEach
https://developer.mozilla.org/ru/doc.../Array/forEach

reduce
https://developer.mozilla.org/ru/doc...s/Array/Reduce

[Aetae]

Красиво и аккуратно сделать так: присвоить каждому инпуту единый класс и в аттрибуте каждого инпута хранить множитель, чтобы при добавлении нового или удалении не лезть в код, примерно так:

<input class="cost" type="number" data-multiplier="12">

Далее уже использовать примерно такой код:

var inputs = document.querySelectorAll('.cost'), i = inputs.length, cost = 0;

while(i--) {  
  cost += inputs[i].value * inputs[i].getAttribute('data-multiplier');
}

document.getElementById('out').appendChild(
  document.createTextNode(cost + ' ГРИВЕН')
);

[j0hnik]

не заполняя data-multiplier, а заполняя массив

var arr = [16,50,11,8];//заполните сами
document.getElementById('out').textContent = 
arr.reduce((s, el, i) => (document.getElementById('input'+(i+1)).value * el) + s,0)+ ' ГРИВЕН';

[Aetae]

j0hnik, с массивом быстро данные разайдутся с реальностью, гарантия.)
Если уж юзать массив, то тогда и создание разметки в js переносить надо. (ну или юзать фреймворк который всё это сам свяжет)

[j0hnik]

Aetae,
да, согласен, данные в кучу!

[Rise]

Dmitriy8804,

var prices = [16,50,11,8,12,7,6,55,38,65,46,36,40,20,40,50,20,300,200,38,48,58,68,75,115,80,100,170,75,90,40];
var inputs = document.querySelectorAll('[id^=input]');
var output = document.getElementById('out');

function calcCost() {
    var result = 0;
    for (var i = 0; i < inputs.length; i++) {
        result += inputs[i].value * prices[i];
    }
    output.textContent = result;
}

[Dmitriy8804]

он не все будет вводить. все инпуты это виды работ, а конкретнее за вид электромонтажных работ.

[Aetae]

Dmitriy8804, не принципиально, пустое поле считается нулём:

alert('' * 2)

Если нужна дополнительная валидация - для input type number можно задать step, min и max, не приплетая js.