Как упростить код на JavaScript?

Question

[Misha74rus]

Пользователь вводит количество проданных кофе за весь день
по формуле ( кофе1_мл * кофе1_колличество)+(кофе2_мл*кофе2_колличество).....(кофе3_мл..)= "Вы израсходовали всего"+ itogoml +" мл";

если будет 100 позиций,как мне упростить код до цикла или сделать его проще?

<input type="hidden" id="cofe1"  value="1.50">
<input type="hidden" id="cofe2" value="3.40">
<button onClick="jQuery('#N1').val(parseInt(jQuery('#N1').val())-1);jQuery('#N1').change();">-</button>
<input type="number" id="N1" value="0" placeholder="Колличество проданных шт">
<button onClick="jQuery('#N1').val(parseInt(jQuery('#N1').val())+1);jQuery('#N1').change();">+</button>
<br>

<button onClick="jQuery('#N2').val(parseInt(jQuery('#N2').val())-1);jQuery('#N2').change();">-</button>

<input type="number" id="N2" value="0" placeholder="Колличество проданных шт">
<button onClick="jQuery('#N2').val(parseInt(jQuery('#N2').val())+1);jQuery('#N2').change();">+</button>
<button onClick="raschitat();">Рассчитать стоимость</button>
<div id="vsegostuk"></div>
<div id="vsegoml"></div>
<div id="summaprod"></div>

<script type="text/javascript">
function raschitat() {
var a = parseInt(document.getElementById('N1').value);
var b = parseInt(document.getElementById('N2').value);
var c = a + b ;
document.getElementById('vsegostuk').innerHTML = a + " + " + b + " = " + c;


var cofe1 = parseFloat(document.getElementById('cofe1').value);
var cofe2 = parseFloat(document.getElementById('cofe2').value);
var itogoml = (cofe1 * a) + (cofe2 * b) ;
document.getElementById('vsegoml').innerHTML = "Вы израсходовали всего"+ itogoml +" мл";

summaprod = c * 10;
document.getElementById('summaprod').innerHTML = "Вы сегодня продали товаров на сумму "+ summaprod +" р";
}
</script>

Comments

[Иван]

Уважаемый,вы отстали лет на 6. Такого страшного кода я на лабах в унике не видел. Попробуй освоить vue, он вам очень сильно поможет.

[Stalker_RED]

Иван, почему на 6? Такой код и 10 лет назад был пугающим.

[alex-1917]

автор, ты имеешь ввиду вот этих строк может быть 100 или что??:

<input type="hidden" id="cofe1"  value="1.50">
<input type="hidden" id="cofe2" value="3.40">

и если да, то как пользователь их создает, сам что-ли или скриптом, таки неясно...

[alex-1917]

Иван, да ладно, тут упростить можно раза этак в два и сделать как хочет автор (хотя пока не понятно чо он хочет).
Ваш этот vue пихать во все дырки тоже не вариант, это вы его хорошо изучили, а рыться в ПЫЛЬНЫХ талмудах ради ОДНОГО куска в проекте я бы не стал и автору не советую...

[Misha74rus]

alex-1917, да и формула расчета тоже будет из 100 переменных

[alex-1917]

Misha74rus, так кто формирует эти 100 пунктов? пользователь или программист? и цифра всегда одна и та же (100) или вариативная?

[Иван]

alex-1917, Это развития ради был дан совет.

[Misha74rus]

alex-1917, есть 100 разных товаров у которых 100 разных значений (граммы допустим)
значения граммы формирую я,указываю что у товара 1=20гр у товара 2=50грм
а значения колличество_шт указывает пользователь
и мне нужно чтобы не писать в формуле длинный расчет ,а как нить упростить
const totalVolume = (volume1 * a) + (volume2 * b)
будет 100 товаров допустим и мне придется писать
(volume1 * a) + (volume2 * b) + (volume3 * c)+(volume4 * d) + .... N100

[alex-1917]

Misha74rus, ну вот. я дал ответ, посмотри там ниже.
это не надо писать, простыню, там все проще

Answer 1

[Stalker_RED]

jsfiddle.net/8uow6n3y

Не совсем понятно зачем у вас дополнительные кнопки +/- возле input type=number, у него же встроенные есть:


Если не станете их выбрасывать, то видимо придется добавить на minus проверку на отрицательные числа.

Comments

[Misha74rus]

а если товаров будет 100?
то формула будет (volume1 * a) + (volume2 * b)+(volume3*c)+.......(volume100*aaa)

const totalVolume = (volume1 * a) + (volume2 * b)
  const sum = (a + b) * 10;

а мой вопрос как сократить такую формулу)
на счет кнопок + и - я их хочу потом оформить чтобы с телефона удобней можно было нажимать

[Stalker_RED]

Misha74rus, это?
jsfiddle.net/8uow6n3y/2

[Misha74rus]

Stalker_RED, да)) спасибо огромное,это то что мне было нужно ^_^
я уже пытался и через двумерный массив это сделать

[alex-1917]

Stalker_RED, ну и как это будет для 100 товаров?? простыня будет... селектом надо делать, к бабке не ходи.. он щас еще скажет, что вообще не 100 а 500 товаров... там же комбинации с сиропами.. а еще пирожные захочет сюда же)))

[Никита Егоров]

Misha74rus, не забывайте отмечать решением

[Misha74rus]

Stalker_RED, а если допустим я хочу добавить новую переменную граммы?

просто у поле input может только один name"x"

[Stalker_RED]

Misha74rus, так пойдет?
jsfiddle.net/8uow6n3y/5

Answer 2

[alex-1917]

Или я ошибаюсь или автор половину не озвучил, но должно быть так:
1. выпадающий селект с типами кофе, там эти ваши 100 позиции
2. инпут для количества (или опять же селект, если количества целочисленные, хз, из вопроса неясно)
3. кнопка ВВОД выбранного варианта
4. кнопка ИТОГО
5. ВСЁ! )))

таким образом, оператор выбирает в селекте тип кофе, вводит кол-во, жмет ввод, затем повторяет сколько нужно раз, и в конце нажимает кнопку ИТОГО

скрипта там на 12 строк, могу накидать, когда время будет, так-то дел полно, как минимум вот именно сейчас коньяк греется

Answer 3

[msdos-x86]

А к чему parseInt и parseFloat, если дальше сложение и умножение идёт? Js сам сможет типы преобразовать