Как сделать независимыми кнопки изменения каждого счетчика?
На сайте есть несколько кнопок плюс и минус и рядом с ними цифра, при нажатии на них цифра должна увеличиваться или уменьшаться. Так вот, чтобы работали все кнопки, я использовал querySelectorAll, НО теперь число увеличивается везде, а мне нужно чтобы число менялась только там где нажимаешь кнопку.
Знаю объяснил плохо, но надеюсь кто-нибудь поймет и поможет мне :)
Вот код:
HTML
<div class="menu-count-btn"> <button class="minus">-</button> <div class="count-number">0</div> <button class="plus">+</button> </div> |
<div class="menu-count-btn"> <button class="minus">-</button> <div class="count-number">0</div> <button class="plus">+</button> </div>
JS
document.querySelectorAll('.plus').forEach((btn) => { btn.onclick = function() { let plusResult = document.querySelectorAll('.count-number').forEach((number) => { number.innerHTML++ }) if (plusResult == 6) { document.querySelector('.count-number').innerHTML = 6 } } }) document.querySelectorAll('.minus').forEach((btn) => { btn.onclick = function() { let minusResult = document.querySelectorAll('.count-number').forEach((number) => { number.innerHTML-- }) if (minusResult == 0) { document.querySelector('.count-number').innerHTML = 0 } } }) |
document.querySelectorAll('.plus').forEach((btn) => { btn.onclick = function() { let plusResult = document.querySelectorAll('.count-number').forEach((number) => { number.innerHTML++ }) if (plusResult == 6) { document.querySelector('.count-number').innerHTML = 6 } } }) document.querySelectorAll('.minus').forEach((btn) => { btn.onclick = function() { let minusResult = document.querySelectorAll('.count-number').forEach((number) => { number.innerHTML-- }) if (minusResult == 0) { document.querySelector('.count-number').innerHTML = 0 } } })
Дополнительно:
Открывай любой учебник веб разработчика и с начала читай.
Отдельно HTML, отдельно JS.
А то невозможно читать же..
Внутри уже все функции.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания независимых кнопок изменения каждого счетчика, необходимо использовать JavaScript для управления состоянием каждого счетчика отдельно.
Прежде всего, необходимо добавить уникальные идентификаторы к каждому счетчику и кнопкам изменения. Например, для счетчика "counter1" и кнопок "+1" и "-1" можно использовать следующий HTML код:
<div id="counter1">0</div> <button id="increment1">+1</button> <button id="decrement1">-1</button>
Затем, можно использовать JavaScript для управления каждым счетчиком по отдельности. Ниже приведен пример кода, который позволяет увеличивать и уменьшать значение счетчика "counter1" при нажатии на соответствующие кнопки:
document.getElementById('increment1').addEventListener('click', function() { var counter = document.getElementById('counter1'); var value = parseInt(counter.innerText); counter.innerText = value + 1; }); document.getElementById('decrement1').addEventListener('click', function() { var counter = document.getElementById('counter1'); var value = parseInt(counter.innerText); counter.innerText = value - 1; });
Этот код позволит управлять каждым счетчиком и его кнопками независимо от других счетчиков на странице. Путем добавления дополнительных счетчиков и кнопок, можно легко расширить эту функциональность для любого количества счетчиков на странице.