Увеличение value input'а при клике на кнопку

Question

Как сделать чтобы при нажатии на последний button, input увеличивался на 10?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-number" data-type="minus" data-field="category" onclick="descrement($(this).parent().parent())")>- 1</button>
    </span>
  <input type="text" name="quantity" class="form-control input-number" id="category" value="1">
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="category" onclick="increment($(this).parent().parent())">+ 1</button>
    </span>
  </button>
  </span>
</div>
<button type="button" onclick="increment($(this).parent().parent().find('.input-number').val(this.value))" value="10">+ 10</button>

Answer 1

Пометьте все управляющие кнопки каким-нибудь классом. Добавьте индикатор того, каким инпутом они управляют. Укажите значение, на которое они изменяют. Напишите общий обработчик для всех этих кнопок.

$(".b").click(function(){
   let t = $(this).data('target');
   let cv = +$(t).val();
   let v = +$(this).val();
   $(t).val( cv + v ) ;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="b" data-target="#x" value="-1">&minus;1</button>
<input id="x" value="0">
<button class="b" data-target="#x" value="1">&plus;1</button>
<button class="b" data-target="#x" value="10">&plus;10</button>

Answer 2

Это достаточно просто сделать, я продолжил Вашу идею с data-type:

const input = document.querySelector("input")

const handleClick = event => {
  const dataType = event.target.dataset.type
  const value = Number(input.value.trim()) || 0
  switch (dataType) {
    case "minus":
      input.value = value - 1
      break
    case "plus":
      input.value = value + 1
      break
    case "plus10":
      input.value = value + 10
      break
  }
}

document.querySelectorAll("button").forEach(item => {
  item.addEventListener("click", handleClick)
})

<div>
  <span>
    <button type="button" data-type="minus">- 1</button>
  </span>
  <input type="text" value="1">
  <span>
    <button type="button" data-type="plus">+ 1</button>
  </span>
</div>
<button type="button" data-type="plus10">+ 10</button>

БЛОГ НА HUSL

Увеличение value input'а при клике на кнопку

Ответы (2 шт):