Как реализовать несколько независимых степперов?

Question

[Danya Wyse]

Как сделать так чтобы счетчик изменялся непосредственно тот на который кликаешь, а не только первый.

<div class="count-row">
								<div class="count-wrapper">
									<div class="count-minus _icon-minus"></div>
									<div class="count"><span class="counter">0</span></div>
									<div class="count-plus _icon-plus"></i></div>
								</div>
								<div class="count-wrapper">
									<div class="count-minus _icon-minus"></div>
									<div class="count"><span class="counter">0</span></div>
									<div class="count-plus _icon-plus"></i></div>
								</div>
							</div>

const countWrapper = document.querySelector('.count-row');
const minusCount = document.querySelector('.count-minus');
const plusCount = document.querySelector('.count-plus');
let thisCount = document.querySelector('.count');
let counter = document.querySelector('.counter');

counter = 0;

countWrapper.addEventListener("click", (e) => {
	if (e.target === plusCount) {
		counter++;
	} else if (e.target === minusCount && counter !== 0) {
		counter--;
	}
	thisCount.innerHTML = counter;
});

Answer 1

[Александр]

document.querySelectorAll('.count-wrapper').forEach((wrapper) => {
    const minusButton = wrapper.querySelector('.count-minus');
    const plusButton = wrapper.querySelector('.count-plus');
    const counterElement = wrapper.querySelector('.counter');

    if (!minusButton || !plusButton || !counterElement) {
        return;
    }

    let counter = Number(counterElement.textContent.trim()) || 0;

    minusButton.addEventListener('click', (event) => {
        event.preventDefault();
        if (counter > 0) {
            counter--;
        }
        counterElement.textContent = counter;
    });

    plusButton.addEventListener('click', (event) => {
        event.preventDefault();
        counter++;
        counterElement.textContent = counter;
    });
});

Comments

[Danya Wyse]

Огромное спасибо, думал все в один слушатель получится сделать.
А как изменить число счетчика чтобы не с 1-2-3 начиналось например, а вначале был 0, то есть 01,02,03 и т.д?

[Александр]

Danya Wyse, https://developer.mozilla.org/en-US/docs/Web/JavaS...

[Danya Wyse]

Александр, получилось вот так
counterElement.textContent = counter < 10 ? "0" + counter : counter;