为什么我不断得到NaN？

Question

These are my codes. I don't know why I keep getting NaN? Please help me on this one. My textbox value comes from a dropdown that whatever the user chooses, a corresponding value will appear on the textbox that's why i used value="" I don't know if its the part that I got wrong. Please tell me how to deal with this NaN.

JS

function subtotal(){
        var as = $("#as").val();
        var txt1 = $('#sff').val();
        var txt2 = $('#osf').val();
        var d = 0;
        var e = 0;
        var f = 0;
        var g = 0;

        var a = parseFloat(as, 10);
        var b = parseFloat(txt1, 10);
        var c = parseFloat(txt2, 10);

        if ($('#cbx3').is(":checked")) {
            d = parseFloat($("#cbx3").val(), 10);
        }
        if ($('#cbx4').is(":checked")) {
            e = parseFloat($("#cbx4").val(), 10);
        }
        if ($('#cbx5').is(":checked")) {
            f = parseFloat($("#cbx5").val(), 10);
        }
        if ($('#cbx6').is(":checked")) {
            g = parseFloat($("#cbx6").val(), 10);
        }
        var total = a + b + c + d + e + f + g;

        $('#st').val(total.toFixed(2)); 
        }
function grandtotal(){
var x = document.getElementById("st").value;
var y = document.getElementById("shppng").value;

var sum = parseFloat(x, 10)+ parseFloat(y, 10);
$("#gt").val(sum.toFixed(2));

HTML

<input type="text" id="sff" placeholder="$0.00" value="" style="float:left;"/>
<input type="text" id="osf" placeholder="$0.00" value="" style="float:left;"/>
<select id="as" style="margin: 3px 0 0 55px; width:48%; position: absolute; float: left;">
       <option value="99.00">$99.00/</option>
       <option value="178.20">$178.20</option>
       <option value="241.56">$241.56</option>
       <option value="292.24">$292.24</option>
       <option value="332.80">$332.80</option>
</select>
<input type="checkbox" id="cbx4" value="69.00"/>
<input type="checkbox" id="cbx5" value="35.00"/>
input type="checkbox" id="cbx6" value="39.00"/>

Answer 1

Specify default value.

<input type="text" id="sff" placeholder="$0.00" value="0" style="float:left;"/>
<input type="text" id="osf" placeholder="$0.00" value="0" style="float:left;"/>

Answer 2

The value of a , b or c can be blank so

 function subtotal() { var as = $("#as").val(); var txt1 = $('#sff').val(); var txt2 = $('#osf').val(); var d = 0; var e = 0; var f = 0; var g = 0; var a = parseFloat(as, 10) || 0; var b = parseFloat(txt1, 10) || 0; var c = parseFloat(txt2, 10) || 0; if ($('#cbx3').is(":checked")) { d = parseFloat($("#cbx3").val(), 10); } if ($('#cbx4').is(":checked")) { e = parseFloat($("#cbx4").val(), 10); } if ($('#cbx5').is(":checked")) { f = parseFloat($("#cbx5").val(), 10); } if ($('#cbx6').is(":checked")) { g = parseFloat($("#cbx6").val(), 10); } var total = a + b + c + d + e + f + g; $('#st').val(total.toFixed(2)); } function grandtotal() { var x = document.getElementById("st").value; var y = document.getElementById("shppng").value; var sum = parseFloat(x, 10) + parseFloat(y, 10); $("#gt").val(sum.toFixed(2)); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" id="sff" placeholder="$0.00" value="" style="float:left;" /> <input type="text" id="osf" placeholder="$0.00" value="" style="float:left;" /> <select id="as"> <option value="99.00">$99.00/</option> <option value="178.20">$178.20</option> <option value="241.56">$241.56</option> <option value="292.24">$292.24</option> <option value="332.80">$332.80</option> </select> <input type="checkbox" id="cbx4" value="69.00" /> <input type="checkbox" id="cbx5" value="35.00" /> <input type="checkbox" id="cbx6" value="39.00" /> <br /> <input id="st" /> <input id="gt" /> <br /> <input type="button" value="Total" onclick="subtotal(); grandtotal();" />