Простите возможно за нубский вопрос, но я нуб (ага, да). У меня на сайте есть корзина, реализованная на JS. В карточке товара есть счётчик его количества (который можно изменять, хочет пользователь больше или меньше), а также цена за одну единицу товара.
Вопрос: Как при нажатии на кнопки "+" или "-" менять стоимость товара?
Пример: Товар стоит 100 -> нажали на кнопку "+" -> товар стоит 200 -> нажали на кнопку "-" -> товар стоит 100 -> нажали дважды на кнопку "+" -> товар стоит 300 и т.д.
Моя реализация следующая:
let plus = document.querySelectorAll(".plus")
let minus = document.querySelectorAll(".minus")
minus.forEach((elem, index1) => {
elem.addEventListener("click", () => {
if (elem.nextElementSibling.textContent > 1) {
elem.nextElementSibling.innerHTML = Number(elem.nextElementSibling.textContent) - 1
}
document.querySelectorAll(".pricePerItem").forEach((elem2, index2) => {
if(index1 == index2) {
elem2.textContent = Number(elem2.textContent) * (Number(elem.nextElementSibling.textContent))
}
})
})
})
plus.forEach((elem, index1) => {
elem.addEventListener("click", () => {
if (elem.previousElementSibling.textContent < 9) {
elem.previousElementSibling.innerHTML = Number(elem.previousElementSibling.textContent) + 1
}
document.querySelectorAll(".pricePerItem").forEach((elem2, index2) => {
if(index1 == index2) {
elem2.textContent = Number(elem2.textContent) * (Number(elem.previousElementSibling.textContent))
}
})
})
})
Здесь вообще не работает минус (либо 0, либо не меняется), а плюс работает, но не так как нужно. Он цену перемножает новую, а не старую. Я так понимаю мне нужно сохранять как-то куда-то старую цену к каждому товару и от неё считать. Но как это сделать не особо понимаю.
Помогите пожалуйста :)
Картинка карточки:
data-*
атрибут, так же для такого элемента (плюсик, инпут, минус) я думаю лучше сделать обертку и с помощью делегирования определять на что нажали (плюс или минус), а инпут вынести в переменную.