Мини калькулятор расчета стоимости от количества?

Question

[Влад]

Добрый день , только начинаю учиться JS подскажите пожалуйста есть мини калькулятор . Когда вводишь данные например от 0 до 2000 цена 1.5 от 2000 до 5000 цена 1.3 от 5000 до 30000 цена 1 и после 30000 цена 0.8 .Подскажите что я делаю не так .Спасибо

<script>$(function() {
        function count() {
            var a = " 2000";
            var b = "5000";
            var c = "30000";
            var sum = +$("#count_inp").val() || 0;
            if (sum <= a) {
                var result = (1.5) * sum;
                $("#result p").html(result + " Рублей")
            if (sum >= b) {
                    var result = (1.3) * sum;
                    $("#result p").html(result + " Рублей")

                }
            if (sum >= c) {
                    var result = (1) * sum;
                    $("#result p").html(result + " Рублей")

                } else $("#result p").html("Укажите расстояние");
            } else $("#result p").html("Укажите расстояние");




        }
        var s = $("#process_all_b");
        s.click(count)
    });
    </script>

<div id="calc_div">

    <div id="quantity_div"><p class="c">
        Сколько километров <br>
        <input type="text" id="count_inp"><br>
    </div>

    <div id="final_div">
        <p class="c"><button id="process_all_b" >Посчитать</button><br></p>
        <div id="result"><p class="c">0 Рублей</p></div>
    </div>
</div>

Comments

[WebDev]

Числа без кавычек, значение из поля привести к числу.

var a = 2000;
var b = 5000;
var c = 30000;
var sum = $("#count_inp").val() || 0;
sum = parseFloat(sum);

Answer 1

[kulaeff]

У вас много ошибок в коде:

1. переменные a, b, c строковые почему-то, таким образом вы сравниваете строки с числом
   
2. косяки с условными переходами
   
3. пропущенные фигурные скобки
   
4. лишний else
   

Помимо этого и того, о чем сказали другие отписавшиеся, ваш код еще и написан в лоб, никакой элегантности и оптимизации.

Причесал по-быстрому тут https://jsfiddle.net/hyxt3ba2/1/. Хотя там еще работать и работать.

Comments

[Влад]

Спасибо большое!Я только учусь

[kulaeff]

Не за что. Старайтесь выносить в отдельную функцию любой кусок кода, который повторяется 2 и более раз (я вынес в функцию renderCost). Плюс вашу задачу можно решить без использования большого количества if else. Сейчас у вас 4 условия, а вдруг надо будет еще 17? Писать if else на каждое условие это ужас ужас. Вместо этого лучше использовать массив.

[Влад]

и циклом вывести потом?

[kulaeff]

Не, не циклом. Массив просто как хранилище условий расчета. Ключи массива - это дистанция, а значения - это множитель. Ищите введенную дистанцию в массиве, получаете множитель, перемножаете и выводите.

[Влад]

Спасибо еще раз, еще вопрос , а как сделать что бы оно подгружалось без кнопки рассчитать?

[kulaeff]

Влад: По мере ввода значения в инпут?

[Влад]

Да типа Ajax что бы кнопка не было . А когда вводишь оно считает без перезагрузки

[kulaeff]

Влад: чтобы расчет ввелся на серваке и подгружался по мере ввода, то надо делать как-то так:

$('.distance').on('input', function(e) {
  var distance = +e.target.value

  $.get(url, distance, function(data) {
    // Тут у нас в data будет уже рассчитанная стоимость, которую нужно вывести на странице
  })
});

[Влад]

Что -то не могу прикрутить к своему коду((

[kulaeff]

Влад: А что именно не получается?

[Влад]

Вставил в свой код не работает не подгружает , а куда Id вставлять я не знаю слаб в JS очень вот учусь потихоньку ..

[kulaeff]

Влад: код, который я написал, это скорее псевдокод, просто чтобы показать примерно как надо делать, неудивительно, что он не работает у вас. Я ведь не знаю, на какой урл отправлять данные, чтобы получить расчет. Я теперь даже не уверен, если у вас на стороне сервера такой урл. Почитайте для начала https://habrahabr.ru/post/42426/.

[Влад]

Хорошо спасибо, оно к форме прикручуеться ))

Answer 2

[Владимир]

ты сравниваешь строки арифметическими операторами,
Нужно переменные a, b , и с задать числом и сумму соответственно привести к числу ну и округление результата не забыть

$(function() {
        function count() {
            var a = 2000;
            var b = 5000;
            var c = 30000;
            var sum = parseInt( $("#count_inp").val(), 10);
            if (sum <= a) {
                var result = Math.round((1.5) * sum);
                $("#result p").html(result + " Рублей")
            }else if (sum >= b) {
                    var result = Math.round((1.3) * sum);
                    $("#result p").html(result + " Рублей")

            }else if (sum >= c) {
                    var result = Math.round((1) * sum);
                    $("#result p").html(result + " Рублей")

                
            } else $("#result p").html("Укажите расстояние");
        }
        var s = $("#process_all_b");
        s.click(count)
    });

Answer 3

[nofuture trustnoone]

a, b, c у вас - это символы, в ифах вы сравниваете символы. Сделайте эти переменные числами, и парсите числа.