用于计算学期类(class)费用的 Javascript 表单

Question

我是 javascript 新手，我正在尝试创建一个看似简单的表单。但由于某种原因我无法让它工作。我知道这对于入门级 JavaScript 开发人员来说应该是一项简单的任务，但我无法弄清楚。我今天尝试了很多解决方案，但未能使其发挥作用。如果你们能提供任何帮助，我们将不胜感激:)

我正在尝试构建一个表单来估计逃课的费用:

( http://jsfiddle.net/Gt2vK/2/ )

function calculateCost() {
    // enter annual tuition
    var $annualTuition = parseInt($('#annual_tuition').val(), 10);
    // tuition per semester
    var semesterTuition = $annualTuition / 3;
    // total number of credits for semester
    var $semesterCredits = parseInt($('#semester_credits').val(), 10);
    // cost of a single credit
    var singleCreditCost = semesterTuition / $semesterCredits;
    // total credits for class being skipped
    var $skippedTotalCredits = parseInt($('#skipped_total_credits').val(), 10);
    // total cost for class being skipped
    var skippedTotalCreditsCost = $skippedTotalCredits * singleCreditCost;
    // total number of days in semester for class being skipped
    var $skippedTotalDays = parseInt($('#skipped_total_days').val(), 10);
    // (total cost of class) / (total number of class days in semester) = cost of class
    var skippedSingleClassCost = skippedTotalCreditsCost / $skippedTotalDays;
}​

$(function(){

    $('#cost').on('click', function(){
        $('#costTotal').html(calculateCost);
        // why the heck doesnt this work?!?
        alert(calculateCost);
    });

});

和我的html:

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

    <div>
        <label for="annual_tuition">Annual Tuition:</label>
        <input type="text" name="annual_tuition" id="annual_tuition" value="" tabindex="1">
     </div>

        <div>
        <label for="semester_credits">Semester Credits</label>
        <input type="text" name="semester_credits" id="semester_credits" value="" tabindex="1">
     </div>

     <div>
        <label for="skipped_total_credits">Skipped Total Credits</label>
        <input type="text" name="skipped_total_credits" id="skipped_total_credits" value="" tabindex="1">
     </div>

        <div>
        <label for="skipped_total_days">Skipped Total Days</label>
        <input type="text" name="skipped_total_days" id="skipped_total_days" value="" tabindex="1">
     </div>

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

    <div id="costTotal"></div>

</form>

Answer 1

您的 onclick 事件连接不正确，我已更改:

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

更改您的 JavaScript:

function calculateCost() {
 // enter annual tuition
 var $annualTuition = parseInt($('#annual_tuition').val(), 10);
 // tuition per semester
 var semesterTuition = $annualTuition / 3;
 // total number of credits for semester
 var $semesterCredits = parseInt($('#semester_credits').val(), 10);
 // cost of a single credit
 var singleCreditCost = semesterTuition / $semesterCredits;
 // total credits for class being skipped
 var $skippedTotalCredits = parseInt($('#skipped_total_credits').val(), 10);
 // total cost for class being skipped
 var skippedTotalCreditsCost = $skippedTotalCredits * singleCreditCost;
 // total number of days in semester for class being skipped
 var $skippedTotalDays = parseInt($('#skipped_total_days').val(), 10);
 // (total cost of class) / (total number of class days in semester) = cost of class
 var skippedSingleClassCost = skippedTotalCreditsCost / $skippedTotalDays;
 return skippedSingleClassCost ;
}​
    $("#cost").click( function()
       {
         $('#costTotal').html(calculateCost());
   //      alert(calculateCost());
       }
    );