Почему js выдает не верный ответ на булевое выражение?

Question

[Cat_usual]

<script>

function f() {
            var bal = $.trim($('#bal').val());
            var perc = $.trim($('#percent').val());
            if(bal && perc)
            {
                var id = generateId(10);
                var cl1 = $.ajax({
                    url: "ajaxs.php",
                    data: "x=test",
                    type: "POST",
                    success: function (data) {
                        window.test1 = data;
                    }
                });
                var cl = test1;
                var win_number = getRandomInt(1, 95);

                alert('Ставка: ' + bal + ' | баланс: ' + cl);
                alert(bal > cl);
                if (bal < cl) {
                    if (perc > win_number) {
                        var win_summ = 100 / perc * bal;
                        var math = cl - bal + win_summ;
                        $('#cl').html(math.toFixed(2));


                        $('.errors').append(`<div class="` + id + `" style="background: green; padding: 2px 2px 2px 2px;">Вы победили!</div>`);
                        setTimeout(() => $('.' + id + '').css('display', 'none'), 5000);
                    }else {
                        var cl = $('#cl').html();
                        var math = cl - bal;
                        $('#cl').html(math.toFixed(2));
                        $('.errors').append(`<div class="` + id + `" style="background: red; padding: 2px 2px 2px 2px;">Проигрыш! Выпало число:` + win_number + ` </div>`);
                        setTimeout(() => $('.' + id + '').css('display', 'none'), 5000);
                    };
                }else {
                    $('.errors').append(`<div class="` + id + `" style="background: red; padding: 2px 2px 2px 2px;">Недостаточно средств!</div>`);
                    // $('.errors').append(`<div class="error" style="background: red; padding: 2px 2px 2px 2px;">Успешно!</div>`).delay(2000).hide();
                    setTimeout(() => $('.' + id + '').css('display', 'none'), 5000);
                };
            };
        };

</script>

При выполнении alert(bal > cl) и значениях bal = 5, cl = 430 выдает true, то есть, то, что bal больше, чем cl. Но это ведь не так, что делать?

Comments

[Kovalsky]

Сравнивать числа, а не строки

Answer 1

[Сергей Соколов]

Сейчас в обеих переменных — текст, а не числа. Т.к. в алфавите "5" идёт после "4", то "5" > "499999"

// замените
var bal = $.trim($('#bal').val());
// на
var bal = +$.trim($('#bal').val());

Аналогичным образом надо поступить и с переменной cl – сделать из текста число.

Но тут есть ещё другая ошибка.
В этом коде вы же не расчитываете, что в переменной cl окажется свежий результат выполнения ajax-запроса?

var cl1 = $.ajax({
                    url: "ajaxs.php",
                    data: "x=test",
                    type: "POST",
                    success: function (data) {
                        window.test1 = data;
                    }
                });
                var cl = test1;

Comments

[Cat_usual]

Спасибо вам, очень благодарен, ибо не понимал как с этим справиться!

[Cat_usual]

А как можно при каждом последующем клике новый ajax посылать, чтобы иметь новые данные?
Позже все на стороне сервера хочу сделать, а в данный момент все на клиентской части.

[Cat_usual]

Так же, если я не изменю сумму, то можно нажимать хоть до - бескончености.

Как мне тогда делать?

[Сергей Соколов]

ajax-запрос посылаете нормально, но он асинхронный, т.е. код после $.ajax() выполнится сразу, не дожидаясь ответа на запрос.
А вот по окончании запроса выполнится функция в success – вот там и надо держать дальнейший код, работающий с полученным ответом.

Если совсем грубо - все строки, начиная с var cl = test1; перетащите внутрь функции сразу после window.test1 = data;