Блог

Главная - Вопросы по программированию - Странная ошибка jquery в простом коде

Странная ошибка jquery в простом коде

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть простой html-код с формой:

 <span class="price"></span>
Enter amount: 
<input type="text" class="form-control amount" name="amount" value="500">

<!--Next input fields are hidden by Bootstrap class "hide"-->
<input type="text" name="minimal-amount" class="hide minimal-amount" value="500">
<input type="text" name="oneprice" class="hide oneprice" value="0.20">

<script>
$(".amount").on("change", function(){
        var am = $(".amount").val();
        var min = $(".minimal-amount").val()
        if(am<min){
            $(".amount").val($(".minimal-amount").val());
        }else{
            var am = $(".amount").val();
            var oneP = $(".oneprice").val();
            var finalPrice = am*oneP;
            $(".price").html(finalPrice);       
        }
});
</script>

Идея этого кода очень проста. Когда пользователь вводит amount цифры в поле, мой скрипт должен проверить, если то, что пользователь вводит, меньше минимально доступного значения в minimal-amount поле, скрипт изменяет значение amount поля на значение по умолчанию minimal-amount .
Но проблема в том, что идентификатор, который я просто добавляю 0 в amount поле (и его значение становится 5000), все в порядке, но когда я меняю значение amount поля на 1000, скрипт изменяет значение amount поля на значение по умолчанию, как будто оно их уменьшает minimul-amount .
Что я делаю не так, и как я могу исправить эту проблему?
P.S. Пример этого кода вы можете найти здесь — http://friendfi.me/tests/amount.php

Ответ №1:

Вы должны проанализировать значение перед использованием. Потому .val() что вернет только строковый тип.

 $(".amount").on("change", function(){
        var am = parseFloat($(".amount").val());
        var min = parseFloat($(".minimal-amount").val());
        if(am<min){
            $(".amount").val($(".minimal-amount").val());
        }else{
            var am = $(".amount").val();
            var oneP = $(".oneprice").val();
            var finalPrice = am*oneP;
            $(".price").html(finalPrice);       
        }
});

Комментарии:

1. @Satpal извините, я вас не понял. можете ли вы объяснить?

2. Также вызов $(".minimal-amount").val() дважды кажется глупым, когда у вас уже есть значение min .

3. parseInt должен принимать исходное значение: parseInt("1234", 10)

4. @Satpal нет. Нет ничего похожего на parseDouble. Я отредактировал ответ

5. @Ingmars, да radix is an optional argument. , но важно. Читать davidwalsh.name/parseint-radix

Ответ №2:

В этом коде много ошибок. Вот рабочий JSBin: http://jsbin.com/qilob/2/edit?html ,js, вывод

Основные моменты

Вам нужно инициализировать DOM, прежде чем вы сможете с ним работать. Обертывание этого в функции, переданной в jQuery, заставит его подождать, пока страница не завершит загрузку, прежде чем манипулировать ею.

 $(function() { ... });

Используйте кэшированные значения, поскольку элементы не сильно изменятся.
Это избавляет от необходимости многократного анализа селекторов. Это также экономит
на наборе текста и удобочитаемости.

 var $amount         = $("#amount");
var $minimalAmount  = $("#minimal-amount");
var $onePrice       = $("#oneprice");
var $finalPrice     = $("#price");

При синтаксическом анализе строки в Int вам нужно использовать parseInt 

 var amount = parseInt($amount.val(), 10);

И наоборот, при разборе строки с плавающей точкой вам нужно использовать parseFloat 

 var price = parseFloat($onePrice.val());

JavaScript не может хорошо обрабатывать арифметику с плавающей запятой.
ошибки округления — это плохо, особенно когда речь идет о деньгах, нам нужно
переместить десятичный знак, чтобы предотвратить ошибки округления в более значимых
частях значения цены.

 var total = (amount * (price * 100)) / 100;

Посмотрите на это в действии в JSBin.

Метки: