Как изменить value при клике по кнопке чистым JS?

146

14 декабря 2018, 14:50

Есть следующая разметка. Как на чистом js написать чтобы при клике на кнопку плюс - увеличить value на 1, при клике на кнопку минус - уменьшить на 1. При этом значение value не должно быть меньше 1. Буду благодарен за помощь!

<button class="js-plus-btn" type="button">+</button>
<input id="number-diet" class="js-number" type="number" name="number" value="1">
<button class="js-minus-btn" type="button">-</button>

Answer 1

Пример

function countFunc(count) { 
  var btnPlus = count.querySelector('.js-plus-btn'); 
  var btnMinus = count.querySelector('.js-minus-btn'); 
  var field = count.querySelector('.js-number'); 
  var fieldValue = parseFloat(field.value, 10); 
 
  btnMinus.addEventListener('click', function() { 
    if (fieldValue > 1) { 
      fieldValue--; 
      field.value = fieldValue; 
    } else { 
      return 1; 
    } 
  }); 
  btnPlus.addEventListener('click', function() { 
    fieldValue++; 
    field.value = fieldValue; 
  }); 
 
} 
var counts = document.querySelectorAll('.wrapper'); 
counts.forEach(countFunc);

<div class="wrapper"> 
  <button class="js-plus-btn" type="button">+</button> 
  <input id="number-diet" class="js-number" type="number" name="number" value="1" min="1"> 
  <button class="js-minus-btn" type="button">-</button> 
</div> 
<div class="wrapper"> 
  <button class="js-plus-btn" type="button">+</button> 
  <input id="number-diet" class="js-number" type="number" name="number" value="1" min="1"> 
  <button class="js-minus-btn" type="button">-</button> 
</div>

Answer 2

Можно так:

var plus = document.getElementsByClassName('js-plus-btn')[0]; 
var minus = document.getElementsByClassName('js-minus-btn')[0]; 
var field = document.getElementById('number-diet'); 
 
plus.addEventListener('click', function(){  
  field.value = Calc(1);  
}); 
minus.addEventListener('click', function(){ 
  field.value = Calc(-1);   
}); 
 
function Calc(oper) { 
  let result = parseInt(field.value) + oper ;  
  return (result < 1) ? 1 : result; 
}

<button class="js-plus-btn" type="button">+</button> 
<input id="number-diet" class="js-number" type="number" name="number" value="1"> 
<button class="js-minus-btn" type="button">-</button>

Answer 3

Коряво написал, но работает. Надеюсь, другие поправят, если что.

let pole = document.getElementById("number-diet"); 
 
let plus = document.getElementsByClassName("js-plus-btn")[0]; 
 
let minus = document.getElementsByClassName("js-minus-btn")[0]; 
 
plus.addEventListener("click", function(){pole.value = parseInt(pole.value) + 1;}); 
 
minus.addEventListener("click", function(){if(parseInt(pole.value) > 1)pole.value = parseInt(pole.value) -+ 1;});

<button class="js-plus-btn" type="button">+</button> 
<input id="number-diet" class="js-number" type="number" name="number" value="1" disabled > 
<button class="js-minus-btn" type="button">-</button>