基本的 jQuery 计算器答案

【问题标题】：Basic jQuery Calculator基本的 jQuery 计算器
【发布时间】：2013-09-21 15:45:01
【问题描述】：

我正在开发一个 jQuery 计算器。直到几分钟前，一切都运行良好，现在什么都不会触发。我是否不小心在代码中输入了错误字符？我上下扫描了几次，但找不到来源。任何帮助将不胜感激！

头：

<script src="http://code.jquery.com/jquery.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="css/style-calc.css">
<script src="js/bootstrap.min.js"></script>

jQuery:

$(document).ready(function() {
alert("ready");
 $('#salary, #transcribing-hours, #cost-of-assistant').keydown(function(e){
    var key = e.which;
    if (key != 8 && key != 9 && key != 37 && key != 38 && key != 39 && key != 40 && key != 46 && key != 110 && key != 190 && key != 13){
        if (key < 48){
            e.preventDefault();
        }
        else if (key > 57 && key < 96){
            e.preventDefault();
        }

        else if (key > 105) {
            e.preventDefault();
        }
    }
 });
});

$('#salary').on('input', function() {
    var salary = $('#salary').val();
    var costofassist = $('#cost-of-assistant').val();
    var total = salary / (52 * 40);
    var roundtotal = Math.round(total * 100) / 100;

    $('#hourly-pay-total').text(roundtotal);

});

$('#transcribing-hours').on('input', function() {
    var hoursday = $('#transcribing-hours').val();
    var hoursweek = hoursday * 5;
    var hoursmonth = hoursweek * 4.3;
    var hoursyear = hoursweek * 52;

    $('#transcribing-year').text(Math.round(hoursyear * 100) / 100);
    $('#transcribing-month').text(Math.round(hoursmonth * 100) / 100);
    $('#transcribing-week').text(Math.round(hoursweek * 100) / 100);

    var roundtotal = $('#hourly-pay-total').text();
    var costwithoutyear = (hoursweek * roundtotal) * 52;
    var costwithoutmonth = (hoursweek * roundtotal) * 4.3;
    var costwithoutweek = hoursweek * roundtotal;

    $('#cost-without-year').text(Math.round(costwithoutyear * 100) / 100);
    $('#cost-without-month').text(Math.round(costwithoutmonth * 100) / 100);
    $('#cost-without-week').text(Math.round(costwithoutweek * 100) / 100);

});

$('#cost-of-assistant').on('input', function() {
    var costofassist = $('#cost-of-assistant').val();
    var costwithoutyear = $('#cost-without-year').text();
    var annualsavings = costwithoutyear - costofassist;
    var monthlysavings = annualsavings / 12;
    var weeklysavings = annualsavings / 52;
    var dailysavings = annualsavings / 260;

    $('#annual-savings').text((Math.round(annualsavings * 100) / 100);
    $('#monthly-savings').text(Math.round(monthlysavings * 100) / 100);
    $('#weekly-savings').text(Math.round(weeklysavings * 100) / 100);
    $('#daily-savings').text(Math.round(dailysavings * 100) / 100);
});

【问题讨论】：

仅供参考：在 javascript 中跟踪任何问题的最佳方法是在 google chtome 中打开页面，然后按 F12 进入开发模式。它会告诉你问题。

标签： javascript jquery html calculator

【解决方案1】：

在你的 jQuery 代码的第 59 行是一个左括号太多了。

 $('#annual-savings').text((Math.round(annualsavings * 100) / 100);

应该是：

 $('#annual-savings').text(Math.round(annualsavings * 100) / 100);

提示：如果你使用例如Firefox 或 Safari，您有一个 javascript-console，可以检测此类语法错误。

【讨论】：

【解决方案2】：

我使用了 firebug 插件，我对它非常满意。在控制台选项卡中，它会向您显示语法错误，如 ok 发现的错误。我使用 mozilla，但我很确定 Chrome 也支持它。你应该试一试。

【讨论】：