用于计算学期课程成本的Javascript表单

我是javascript新手，我正在尝试创建一个看似简单的表单。但由于某种原因，我不能让它工作。我知道这对于入门级JavaScripter来说应该是一项简单的任务，但我无法理解。今天我尝试了很多解决方案，但都没有成功。如果你们能提供任何帮助，我们将不胜感激：）

我正在尝试构建一个表单来估计跳过的类的成本：

（）

和我的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>

年度学费：
学期学分
跳过总学分
跳过的总天数
算计

您的onclick事件连线不正确，我已更改：

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

将calculateCost（）更改为

返回
本应被
跳过的SingleClassCost
，然后将对
跳过的SingleClassCost
的引用更改为
calculateCost（）

粘贴到您的

1） 我看不到在任何地方调用
calculateCost
。2） 这些变量只存在于函数的范围内，因此在函数外部无法访问。如果需要函数中的值，则应调用函数并返回值。我可能遗漏了什么吗？不要试图在“提交”按钮上触发onclick事件。使用按钮按钮。doh！抱歉（我不知道我在做什么）k，我根据你的评论更新了代码，所以我在这里尝试了你的建议，但可能我做错了什么：是的，我也在玩它。。另一件事是，您的计算函数需要返回一个值。由于某些原因，我无法使用按钮启动该方法。您好，我在这里尝试了您的解决方案-，知道为什么它不起作用吗？不确定您的计算函数出了什么问题，但只是复制了上面的javascript，它似乎在这里@StupidDev-most def起作用。会有很多基本的错误，抱歉-我会尽力达到你的水平。谢谢你的回答。有哪些错误（除了没有返回语句）和单击事件。。。
<div> 
       <button id="cost" type="button">Calculate</button>
 </div>

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());
       }
    );

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
    return skippedTotalCreditsCost / $skippedTotalDays;
}

$(function(){

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

});