Jquery: input value при добавлении 1, результат увеличивается на 2
Не могу разобраться, почему jquery increment++ добавляет к переменной не 1, а 2. Консоль выдает такую картину...
before increment: 1 VM3089 script.js:186
after increment: 2 VM3089 script.js?ver=5.5.3:183
before increment: 2 script.js?ver=5.5.3:18
after increment: 3 script.js?ver=5.5.3:186
html
<div class="wrapper">
<span class="input-number-decrement">–</span>
<input class="input-count" type="number" value="1" min="1" max="10">
<span class="input-number-increment">+</span>
</div>
Jquery
$(document).on('click', '.input-number-increment', function () {
var tgtInp = $(this).closest('.wrapper').find('.input-count');
console.log('before increment: ' + tgtInp.val());
var thtInpVal = +tgtInp.val();
thtInpVal++;
console.log('after increment: ' + thtInpVal);
var tgtInpMax = parseInt(tgtInp.attr('max'));
if (thtInpVal > tgtInpMax) {
thtInpVal = tgtInpMax;
}
tgtInp.attr('value', thtInpVal);
//prints 3;
})
при этом, если из js кода убрать действие "+", то консоль выдает правильное значение инпута (это 1), то есть:
before increment: 1 VM3089 script.js script.js:186
Need help :)
$(document).on('click', '.input-number-increment', function() {
var tgtInp = $(this).closest('.wrapper').find('.input-count');
console.log('before increment: ' + tgtInp.val());
var thtInpVal = +tgtInp.val();
thtInpVal++;
console.log('after increment: ' + thtInpVal);
var tgtInpMax = parseInt(tgtInp.attr('max'));
if (thtInpVal > tgtInpMax) {
thtInpVal = tgtInpMax;
}
tgtInp.attr('value', thtInpVal);
//prints 3;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<span class="input-number-decrement">–</span>
<input class="input-count" type="number" value="1" min="1" max="10">
<span class="input-number-increment">+</span>
</div>