javascript - 对于小于 30,000 的值，成本计算表单返回 NaN

Question

对于值低于 30,000 的变量，我的计算表单返回 NaN。

在这里摆弄 - ( http://jsfiddle.net/AjkXD/ )

我今天搜索了一下，但找不到解决方案。我是 JS 新手。请问有人可以帮忙吗？

这是 JS:

function calculateCost() {
    'use strict';
    // enter annual tuition
    var $annualTuition = parseInt($('#annual_tuition').val());
    // tuition per semester
    var semesterTuition = Math.round($annualTuition / 3);
    // total number of credits for semester
    var $semesterCredits = parseInt($('#semester_credits').val());
    // cost of a single credit
    var singleCreditCost = semesterTuition / $semesterCredits;
    // total credits for class being skipped
    var $skippedTotalCredits = parseInt($('#skipped_total_credits').val());
    // total cost for class being skipped
    var skippedTotalCreditsCost = $skippedTotalCredits * singleCreditCost;
    // number of times skipped class meets per week
    var $skippedWeekDays = parseInt($('#skipping_class_meet').val());
    // from date
    var fromDate = $('#from').datepicker('getDate');
    // to date
    var toDate = $('#to').datepicker('getDate');
    // calculate number of weeks in date range (semester) using 'from / to' dates
    var skippedWeeks = Math.ceil((toDate - fromDate) / (1000 * 7 * 60 * 60 * 24));
    console.log(skippedWeeks);
    // total number of days in semester for class being skipped
    //var $skippedTotalDays = parseInt($('#skipped_total_days').val());
    var skippedTotalDays = $skippedWeekDays * skippedWeeks;
    // (total cost of class) / (total number of class days in semester) = cost of class
    var skippedSingleClassCost = skippedTotalCreditsCost / skippedTotalDays;
    return skippedSingleClassCost.toFixed(2);

}

$(function() {
    'use strict';

    $('#from').datepicker({
        defaultDate: '+1w',
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function() {
            //toDate = $(this).datepicker('getDate');
        }
    });

    $('#to').datepicker({
        defaultDate: '+1w',
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function() {
            //fromDate = $(this).datepicker('getDate');
        }
    });

    $('#cost').on('click', function() {
        $('.costFigure').fadeIn('fast');
        $('#costTotal').html(calculateCost());

    });

});

这是 html:

<form id="costForm" action="#" onsubmit="#">

                <div>
                    <label for="annual_tuition">What is your annual tuition (estimated)?</label>
                    <div class="styled_select">
                        <select name="annual_tuition" id="annual_tuition" value="tuition amount" autofocus>
                            <option value="0">&nbsp;</option>
                            <option value"5000">$5,000</option>
                            <option value"10000">$10,000</option>
                            <option value"15000">$15,000</option>
                            <option value"20000">$20,000</option>
                            <option value"25000">$25,000</option>
                            <option value="30000">$30,000</option>
                            <option value="35000">$35,000</option>
                            <option value="40000">$40,000</option>
                            <option value="45000">$45,000</option>
                            <option value="50000">$50,000</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label for="semester_credits">How many total credits are you taking this semester?</label>
                    <div class="styled_select">
                        <select name="semester_credits" id="semester_credits" value="" tabindex="2">
                            <option value="0">&nbsp;</option>
                            <option value="3">3 credits</option>
                            <option value="6">6 credits</option>
                            <option value="9">9 credits</option>
                            <option value="12">12 credits</option>
                            <option value="13">13 credits</option>
                            <option value="14">14 credits</option>
                            <option value="15">15 credits</option>
                            <option value="16">16 credits</option>
                            <option value="17">17 credits</option>
                            <option value="18">18 credits</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label for="skipped_total_credits">How many credits is the class you skipped?</label>
                    <div class="styled_select">
                        <select name="skipped_total_credits" id="skipped_total_credits" value="" tabindex="2">
                            <option value="0">&nbsp;</option>
                            <option value="3">3 credits</option>
                            <option value="6">6 credits</option>
                            <option value="9">9 credits</option>
                            <option value="12">12 credits</option>
                            <option value="13">13 credits</option>
                            <option value="14">14 credits</option>
                            <option value="15">15 credits</option>
                            <option value="16">16 credits</option>
                            <option value="17">17 credits</option>
                            <option value="18">18 credits</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label for="skipping_class_meet">How many times a week does the class you skipped meet?</label>
                    <div class="styled_select">
                        <select name="skipping_class_meet" id="skipping_class_meet" value="" tabindex="2">
                            <option value="0">&nbsp;</option>
                            <option value="1">1 time a week</option>
                            <option value="2">2 times a week</option>
                            <option value="3">3 times a week</option>
                            <option value="4">4 times a week</option>
                            <option value="5">5 times a week</option>
                        </select>
                    </div>
                </div>



                <div class="dateRange clearfix">
                    <label>Between what months are you enrolled in this class?</label>
                    <div style="width: 48%; float: left;">
                        <label for="from">From:</label>
                        <input type="text" id="from" name="from">
                    </div>

                    <div style="width: 48%; float: right;">
                        <label for="to">To:</label>
                        <input type="text" id="to" name="to">
                    </div>
                </div>

                <div>
                    <button id="cost" type="button">Calculate</button>
                </div>

                <div class="costFigure">
                    <h1>your missed class cost you $<span id="costTotal"></span></h1>
                </div>

            </form>

Answer 1

您错过了这些值的等号

        <option value"5000">$5,000</option>
        <option value"10000">$10,000</option>
        <option value"15000">$15,000</option>
        <option value"20000">$20,000</option>
        <option value"25000">$25,000</option>

更新了 fiddle 。 http://jsfiddle.net/AjkXD/1/

此外，如果您使用开发人员工具(即 chrome 开发人员工具)检查代码，检查工具通常会突出显示语法错误，从而使它们更易于调试