jquery - why the value is not serial in the same input -

i wanna increase , decrease price function in input element.

i done, found problem now, when changed price directly keyboard, , cliked arrowup or arrowdown, value not serial.

*{   margin: 0;   padding: 0; } .wrap {   position: relative; } .input{   width: 200px;   height: 50px; } {   font-size: 18px;   font-weight: 700;   cursor: pointer; } 

<div class="wrap"> <input class="input" type="text" value='1' /> <i class="plus">+</i> <i class="minus">-</i> </div> 

var input = $('.input'), val = parsefloat($('.input').val()), plus = $('.plus'), minus = $('.minus');      plus.on('mousedown', function(){         input.val(++val);         if(val > 10) { alert('hi'); }     });     minus.on('mousedown', function(){         input.val(--val);         if(val > 10) { alert('hi'); }     });     input.on('change', function(){         var $this = $(this);         if($this.val() > 10) { alert('hi'); }     }) 

codepen

add javascript.

input.on("keyup", function(){   val = number(input.val()); }); 

your variable updated pressing buttons, want updated when user changes value.

demo