0

I have a number input controlled by (+) and (-) buttons. I added a unit label after the number with a span following the input, but now am having trouble figuring out how to pluralize the unit when you increase the number from 1 item --> 2 items

Is there an easy way to do this? (i'm a beginner)

    

$(document).ready(function() {
  $(".panel-calc").on("input", ".quantity", function() {    
    
  var quantity = +$(this).val();

  })
  
  var $buttonPlus = $('.plus-button');
  var $buttonMin = $('.minus-button');
  var $quantity = $('.quantity');

  /*For plus and minus buttons*/
  $buttonPlus.click(function() {
    $quantity.val(parseInt($quantity.val()) + 1).trigger('input');
  });

  $buttonMin.click(function() {
    $quantity.val(Math.max(parseInt($quantity.val()) - 1, 1)).trigger('input');
  });
})
.widget {
  text-align: center;
  padding: 40px;
}

input {
  text-align: center;
  width: 40px;
  border: none;
  text-align: right;
}

.label {
  padding-right: 35px;
  font-family: sans-serif;
  font-size: 13px;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>


<div class="widget">

<! --- plus minus interactive ---> 
<button type="button" class="minus-button">-</button>
  <input type="text" class="quantity" value="1"><span class="label"> item</span>
  <button type="button" class="plus-button">+</button>
  
</div>
dungoroos
  • 3
  • 1
  • Does this answer your question? [Change to plural if value in textbox is greater than 1](https://stackoverflow.com/questions/15648635/change-to-plural-if-value-in-textbox-is-greater-than-1) – pilchard Dec 07 '21 at 19:32
  • Oh thanks for the recommendation! It helps a little. This is as far as I've gotten with the solution above http://jsfiddle.net/7f48h2m9/ any idea how to get the label to change that's not keyup or click? i want it to do it automatically – dungoroos Dec 07 '21 at 20:09
  • You can listen for [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) – pilchard Dec 07 '21 at 20:12
  • I got it, thank you SO much! – dungoroos Dec 07 '21 at 20:19

0 Answers0