Как создать калькулятор товара из одного input и прибавления стоимости на каждый шаг добавления товара?

Question

[Roman Sippel]

Приветствую всех!
Я новичок в JS и обычно пользовался только готовыми библиотеками.
А сейчас столкнулся с нетипичной задачей - верстка калькулятора товара, где есть input с количеством товара от 1, начальная сумма и прибавление числа к начальной сумме при каждом шаге прибавления товара.
Это живой пример - chistoplit.ru (в конце лендинга)

Я много гуглил, но не нашел готовых библиотек, а решения js-калькуляторов, представленные в сети в моеём случае не подходят.
Помогите, плиз :)

Answer 1

[mShpakov]

?
В случае с сайтом вашим это инпут и два баттона, которые делают нечто вроде такого на jquery
$('input').val($('input').val()+1)

Comments

[Roman Sippel]

Да, я смотрел как там реализовано.
На исходном лендинге также value перехватывается и подставляются в строку "2{число} товара на сумму"
Это я бы сделал, в сети есть решения.
А вот сделать калькулятор, где исходные 700 руб. и при каждом шаге в инпуте прибавляется 420 - для меня проблема.

[Роман]

Roman Sippel, сегодня по утру писал подобное

let val = ++event.target.previousElementSibling.value;
        let price = parseInt(event.target.closest('.number').previousElementSibling.textContent);
        elTotal.value = +elTotal.value + price;

1. получаем значение поля товара (кол-во)
2. получаем цену товара за 1шт
3. умножаем введенное кол-во товара на цену за 1шт
4. изменяет значение поля общей стоимости (значение поля общей стоимости + каждый клик на "плюс" добавляем стоимость 1товара)

Если короче то
total.value = +total.value + price;
Так и написано, итоговая стоимость равна итоговая стоимость на данный момент + цена товара за штуку. И вешаем на onclick по + и - соответственно