счётчик по клику

190

12 сентября 2018, 07:00

на странице стоит N количество счётчиков, при клике на + увеличивает значение на 1 или при клике на - уменьшает на 1. Значение не должно быть меньше 0. Проблема у меня что не знаю как можно сделать это для несколько элементов на странице, как это можно реализовать?

html:
<div class="counter">
<button class='btn__arrow plus'>+</button>
<input type="number" value="0">
<button class='btn__arrow nimus'>+</button>
</div>
<div class="counter">
<button class='btn__arrow plus'>+</button>
<input type="number" value="0">
<button class='btn__arrow nimus'>+</button>
</div>

Answer 1

Пример

function counterFunction(count) { 
 
  var plus = count.querySelector('.plus'); 
  var minus = count.querySelector('.minus'); 
  var number = count.querySelector('.number'); 
  var numberValue = parseFloat(number.value, 10); 
 
  minus.addEventListener('click', function() { 
 
    if (numberValue === 0) { 
      return; 
    }; 
 
    numberValue--; 
    number.value = numberValue; 
  }); 
 
  plus.addEventListener('click', function() { 
    numberValue++; 
    number.value = numberValue; 
  }); 
 
} 
 
var counts = document.querySelectorAll('.counter'); 
 
counts.forEach(counterFunction);

.counter { 
  display: flex; 
  padding: 10px; 
}

<div class="counter"> 
  <button type="button" class="minus">-</button> 
  <input type="number" class="number" value="1" placeholder="1"> 
  <button type="button" class="plus">+</button> 
</div> 
<div class="counter"> 
  <button type="button" class="minus">-</button> 
  <input type="text" class="number" value="1" placeholder="1"> 
  <button type="button" class="plus">+</button> 
</div>

Answer 2

<div class="counter">
    <button class="plus">+</button>
    <input type="text" value="0">
    <button class="minus">-</button>
</div>
<div class="counter">
    <button class="plus">+</button>
    <input type="text" value="0">
    <button class="minus">-</button>
</div>
<script>
    var countBlocks = document.querySelectorAll(".counter");
    for(var i = 0; i < countBlocks.length; i++) {
        countBlocks[i].onclick = function() {
            var plusBtn = this.querySelector(".plus");
            var minusBtn = this.querySelector('.minus');
            var textField = this.querySelector('input');
            var textFieldVal = +textField.value;
            plusBtn.onclick = function() {
                textField.value = textFieldVal + 1;
            }
            minusBtn.onclick = function() {
                textField.value = textFieldVal - 1;
            }
        }
    }   
</script>

Answer 3

Чтобы не считать меньше 0, ставим проверку на обработчик клика кнопки "-":

minusBtn.onclick = function() {
    if(textFieldVal == 0)
        return false;
    else                        
        textField.value = textFieldVal - 1;
}