加+1 <input> 每个点击事件的价值。 增量停止在第3个Javascript / jQuery

Question

by default my input value is 1 , i want to add +1 each time i click my button . it stops adding when when it reaches 20 .

i cant figure out why my code stops at number 3 and just repeats 3 .

this is my HTML

<input type="hidden" id="total" value="20" /> //total num
<input type="hidden" id="cur_num" value="1" /> //current num
<button type="button" id="add" >Add</button>

this is javascript and demo here http://jsfiddle.net/zXpen/

$(document).ready(function() {
    $(document).on("click", "#add", function() {

        cur = $('#cur_num').val();
        total = $('#total').val();
        console.log(cur);

        if (cur <= total) {
            cur = parseInt(cur)+parseInt(1);
            $('#cur_num').val(cur);
        }
    });
});

Answer 1

You need to convert your values to integers:

cur = parseInt($('#cur_num').val());
total = parseInt($('#total').val());

At the moment your code is comparing "2" <= "20", then "3" <= "20" (as strings). Therefore the if condition is not met and the code within it is not run.

Also, you don't need parseInt(1) . cur = parseInt(cur)+1; is fine.

Answer 2

.val() returns a string, so cur <= total is comparing two strings lexicographically, ie characters at each position are compared against each other. And "2" in "20" is smaller than "3" in "3" .

You have to convert the values to numbers before you compare them, not after that, eg by using the unary plus operator. Also don't forget to declare your variables with var :

var cur = +$('#cur_num').val();
var total = +$('#total').val();