Как правильно сравнить числа в JS?

Question

[Сергей Жужгов]

Есть html форма

<input type="text" name="bonus_card" id="bonus_card" tabindex="2"  />
<input type="text" name="bb" id="bb" value="25" />

<button id="sub_minus">Списать</button>
<div id="sub_minus_info"></div>

JS:

$('#bonus_card').keyup(function(){
			var b = $('#bb').val();
			var f = $('#bonus_card').val();
			
			if( ( f < 0 ) || ( f > b ) ) { $('#sub_minus').attr('disabled', 'disabled'),  $('#sub_minus_info').html('<div>не более <b>'+ b +'</b> баллов</div>'); }
			else { $('#sub_minus').attr('disabled', ''),  $('#sub_minus_info').html(''); }
			
		});

По задумке кнопка должна дизейблиться если в поле "bonus_card" вводим число более числа заданного в поле "bb" и выводиться сообщение о лимите.

Сейчас не пойму как работает ( смотри jsfiddle.net/6NreT )...
получается так - от 0 до 2 и от 10 до 25 - сообщение не выдаёт, от 3 до 9 сообщение выдаёт.

Помогите, пожалуйста, поправить.

Answer 1

[Руслан Касымов]

var b = parseInt($('#bb').val());
var f = parseInt($('#bonus_card').val());

не по теме вопроса, вместо
$('#sub_minus').attr('disabled', 'disabled')
пишите
$('#sub_minus').prop('disabled', true);
и
$('#sub_minus').removeProp('disabled');
соответственно.

Comments

[Илья Климов]

у parseInt лучше всегда указывать вторым аргументом основание системы исчисления, а то не дай бог кто-то 026 к примеру введет :)

[Руслан Касымов]

согласен

Answer 2

[Илья Климов]

Я вам больше скажу. При 299 к примеру тоже сообщение об ошибке не выдаст. У вас сравнение идет как строки. Есть два решения. Красивое:

var b = +$('#bb').val();
            var f = +$('#bonus_card').val();

и совсем совсем понятно:

var b = parseInt($('#bb').val(), 10);
            var f = parseInt($('#bonus_card').val(), 10);

(заменить на parseFloat если у Вас там вещественные числа могут быть)

Answer 3

[avalak]

spoiler

(function () {
    var message = $('#sub_minus_info');
    var limit = $('#bb');
    var button = $('#sub_minus');
    $('#bonus_card').on('change paste keyup', function() {
        var current_value = +$(this).val();
        var max_allowed = +$(limit).val();
        var is_disabled = current_value < 0 || current_value >= max_allowed;
        $(button).prop('disabled', is_disabled);
        $(message).html(is_disabled ? '<div>не более <b>'+ max_allowed +'</b> баллов</div>' : '');
    });
})();

jsfiddle.
Полезно прочитать: JS Garden

Answer 4

[benderskiy]

вы сравниваете строки, а не числа... используйте приведение типов Number() или parseInt(), parseFloat().
И подскажите, с какой целью вы используете оператор «запятая»?

$('#sub_minus').attr('disabled', 'disabled'),  $('#sub_minus_info').html('<div>не более <b>'+ b +'</b> баллов</div>')

Он предназначен для других целей... javascriptweblog.wordpress.com/2011/04/04/the-java...