Как сделать редактирование значения в input?

Question

[s89]

Есть input и две кнопки + и -. Они прибавляют или убавляют значение в input на 1.

Нужно поставить условие, чтобы значение увеличивалось например не больше 5 ну и вывести уведомление когда ведено в input 5 или больше. Например для дива добавить display:block, или может еще какой то вариант
И если вручную водить число, то тоже чтобы работало.

<div class="numberQut" style="display:inline-block; margin-right:10px;">
   <span class="minusQus">-</span>
   <input type="text" name="quantity" size="1" value="1" class="qut" /> 
   <span class="plusQus">+</span>
</div>

$(document).ready(function() {
  $('.minusQu').click(function () {
    var $vqut = $(this).parent().find('.qut');
    var cont = parseInt($vqut.val()) - 1;
    cont = cont < 1 ? 1 : cont;
    $vqut.val(cont);
    $vqut.change();
    return false;
  });
  $('.plusQu').click(function () {
    var $vqut = $(this).parent().find('.qut');
    $vqut.val(parseInt($vqut.val()) + 1);
    $vqut.change();
    return false;
  });
});

Comments

[Шохрух Шаймардонов]

Так покажите, что вы смогли уже сделать, поможем дописать, а не НАписать

[Сергей delphinpro]

Я вам поправил вопрос, чтобы код было видно. Примите правку или так же исправьте сами, если принимать чужие правки не можете

Answer 1

[0xD34F]

const selectors = {
  wrapper: '.numberQut',
  input: '.qut',
  minus: '.minusQus',
  plus: '.plusQus',
};

const limits = {
  min: 1,
  max: 5,
};

const updateValue = (el, change = 0) =>
  el.value = Math.min(limits.max, Math.max(limits.min, (parseInt(el.value) || 0) + change));

document.addEventListener('click', ({ target: t }) => {
  const change = +t.matches(selectors.plus) || -t.matches(selectors.minus);
  if (change) {
    updateValue(t.closest(selectors.wrapper).querySelector(selectors.input), change);
  }
});

document.addEventListener('input', ({ target: t }) => {
  if (t.matches(selectors.input)) {
    updateValue(t);
  }
});