Input type number: how to detect if value was incremented or decremented?

Question

Up until now, I simply used "change" to see if an input field of the type "number" was changed. However, now I need to know if the number was incremented or decremented to perform different actions. How can I see how the number was changed?

Looking for solutions with JQuery, but plain old JavaScript is fine as well.

Answer 1

You could simply previously store the value of your input and compare it on change :

let value = $('#test').val();

$('#test').on('change',function(){
  if($(this).val() > value){
    console.log('Input was incremented');
  }else{
    console.log('Input was decremented');
  }
  
  value = $(this).val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="test" value="0">