Работяги, добрый день! Пишу проект на html/sass/js, и столкнулся с такой проблемой как: есть две кнопки(уменьшить/увеличить количество товара), при нажатии на кнопку уменьшить визуально товар прибавляется, а переменная уменьшается(скрины будут ниже(извиняюсь за корявый скрин)). Хотел бы узнать почему так!
let btn = document.querySelectorAll('.item-incr-button')
let btnDec = document.querySelectorAll('.item-decr-button')
let i = 1;
btnDec.forEach((btn) => {
btn.addEventListener('click', () => {
let btnId = btn.getAttribute('data-decr-id')
let currentId = document.querySelector(btnId)
currentId.innerText = i
i--
if(i === 0) {
currentId.classList.remove('show')
}
console.log(i)
})
})
btn.forEach((button) => {
button.addEventListener('click', () => {
button.classList.add('add')
button.innerText = ''
let btnId = button.getAttribute('data-incr-id')
let currentId = document.querySelector(btnId)
currentId.innerText = i
i++
currentId.classList.add('show')
console.log('incr')
})
})
<div class="page-item">
<div class="item-counter" id="btn_1"></div>
<div class="item-photo">
<picture class="item-lottie">
<img src="src/image/Burger_148.png" alt="">
<source type="application/x-tgsticker" srcset="src/image/Burger_148.png">
<canvas width="74" height="74"></canvas>
</picture>
</div>
<div class="item-label">
<span class="item-title">
Burger
</span>
<span class="item-price">
$4.99
</span>
</div>
<div class="item-buttons">
<button class="item-decr-button" data-decr-id="#btn_1">
</button>
<button class="item-incr-button" data-incr-id="#btn_1">
<span class="button-item-label">Add</span>
</button>
</div>
</div>
<div class="page-item">
<div class="item-counter" id="btn_2"></div>
<div class="item-photo">
<img src="src/image/Burger_148.png" alt="">
</div>
<div class="item-label">
<span class="item-title">
Burger
</span>
<span class="item-price">
$4.99
</span>
</div>
<div class="item-buttons">
<button class="item-decr-button" data-btn-id="#btn_2">
</button>
<button class="item-incr-button" data-btn-id="#btn_2">
<span class="button-item-label">Add</span>
</button>
</div>
</div>