Переменные заполняются, когда флажок установлен, а затем добавляются вместе - Начало NaN

Question

Я использую jquery.calculation для добавления элемента на страницу.Первая часть моего javascript добавляет это для продукта 255.

Пока это мой javascript:

$(document).ready(function(){

$(".calcTotal").click(
function (){
    // get the sum of the elements
    var studio255_photocopier = $("#studio255_photocopier").sum();
    var sum_checkbox255 = $(".checkbox_sum255:checked").sum();
    var qty255 = $(".qty255").sum();
    var single_total255 = ((studio255_photocopier + sum_checkbox255) * qty255);

    if ($('.sorting_stapling255').is(':checked'))
    {
      var lease_sorting_stapling255 = "25.88";
    };

    if ($('.wake_up_fax255').is(':checked'))
    {
      var lease_wake_up_fax255 = "29.41";
    };

    if ($('.extra_2500_tray255').is(':checked'))
    {
      var lease_extra_2500_tray255 = "24.35";
    };

    var lease_single_total255 = ((lease_extra_2500_tray255 + lease_wake_up_fax255 + extra_2500_tray255) * qty255);

    // Grand total sum
    var grand_total = (single_total255);
    var lease_total = (lease_single_total255);
    // update the total
    $("#grand_total").text("£" + grand_total.toFixed(2));
    $("#lease_total").text("£" + lease_total.toFixed(2));
    }
);

});

Также я использую hmtl:

<div class="details options">
                    <h1>Addtional Options functionality</h1><span>choose your upgrades here:</span>
                    <div class="clear"></div>
                    <form id="studio255">
                    <input class="sum255" type="hidden" id="studio255_photocopier" value="1538.24" />
                    <label><input class="checkbox_sum255 sorting_stapling255" type="checkbox" id="studio255_sorting_stapling" name="sorting_stapling255" value="278.3" />
                    Sorter/Stapler</label>
                    <label><input class="checkbox_sum255 wake_up_fax255" type="checkbox" id="studio255_wake_up_fax" name="studio255_wake_up_fax" value="316.25" />
                    Walk Up Fax Kit</label>
                    <label><input class="checkbox_sum255 extra_2500_tray255" type="checkbox" id="studio255_extra_2500_tray" name="studio255_extra_2500_tray" value="261.86" />
                    Extra 2500 large capacity paper tray</label>
                    <div class="clear"></div>
                </div> <!-- details -->

                <div class="details amount">
                    <p>Specify the number of machines you require, the total price will be calculated automatically (displayed at the bottom of this page):</p>
                    <label>Price
                    <input type="number" id="photocopierTotal_255" class="price" name="studio255_price" /></label>
                    <label>Qty
                    <input class="qty255" type="number" id="studio255_quantity" name="studio255_quantity" /></label>
                    <input id="btnClear" type="reset" value="clear" />
                    <input class="calcTotal" type="button" value="calculate" />
                    </form>
                    <div class="clear"></div>
                </div> <!-- details -->

<p>Your total cost is&nbsp;&nbsp;&nbsp;<span id="grand_total"></span><br />
        Your total lease cost is&nbsp;&nbsp;&nbsp;<span id="lease_total"></span></p>

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

Нижняя частьjavascript просто добавляет итоги, а затем ограничивает их до 2 десятичных знаков.

Я уверен, что мой javascript немного грубоват, и, возможно, я делаю что-то явно не так.

Answer 1

Как указал PointedEars, здесь вы добавляете строки вместе.Оператор + работает как со строками, так и с числами.Если любая из сторон уравнения является строкой, две части объединяются , если обе являются числами, только тогда они добавлены .

var str  = "3.3";
var num1 = 1.1;
var num2 = 1.2;

str + str;   // String: "3.33.3"
str + num1;  // String: "3.31.1"
num1 + num2; // Number: 2.3

Тогда,когда вы умножаете вашу строку, результат преобразуется в число, однако, в вашем случае, потому что ваша строка является чем-то вроде «3.33.3», то есть недопустимым числом, и, следовательно, результатом является NaN

"3.33.3" * 2 // NaN

Ответ в первую очередь - убедиться, что вы работаете с числами.Измените все места, в которых вы определяете числовую строку, на действительное число:

var lease_sorting_stapling255 = 25.88;

Или, если значения поступают из вашей формы, возможно, вам придется проанализировать их в число.Для этого вы можете использовать parseInt или parseFloat в зависимости от того, хотите ли вы использовать десятичные разряды или нет.

parseFloat("25.88");  // 25.88
parseInt("25.88", 10);  // 25

Второй аргумент parseInt очень важен, поскольку он определяет базу для числа.Без него число может быть проанализировано как восьмеричное или шестнадцатеричное.

parseInt("007");  // 7
parseInt("008");  // 8
parseInt("009");  // 9
parseInt("010");  // 8 !!
parseInt("010", 10); // 10

Answer 2

Вы "добавляете" строки , которые вы назначаете ранее:

("12.34" + "56.78") * 9 === "12.3456.78" * 9 "=="NaN * 9" == "NaN.

В следующий раз выучите язык программирования до " фреймворка ".jQuery - не язык;Вы не программируете в jQuery.И есть нет «javascript»: MDN: JavaScript