Question

我正在尝试为拖欠租金制作一个简单的计算器，这样一旦用户键入其值，表格的“结果”部分就会自动填充其结果。

当用户填写他们的详细信息时，结果部分保持原样;但是，当我解密代码时，它告诉我没有错误。我很确定问题出在我的事件处理程序中，但我无法确定哪里/为什么。

以下是代码：

$(document).ready(function () {
    $("#date1").datepicker({

    }).on("change", function (e) {
        dataBind();
    });

    $("#date2").datepicker({

    }).on("change", function (e) {
        dataBind();
    });

    $(document).on("change", "table input", function () {
        dataBind();
    });

    $("#r1").click(function () {
        dataBind();
    });
    $("#r2").click(function () {
        dataBind();
    });
    $("#r3").click(function () {
        dataBind();
    });
});

其中date1和date2是日期选择器，r1，r2和r3是单选按钮。 dataBind是一个执行计算并更新结果字段的函数：

var dataBind = function () {

    var config = {
        dueDate: new Date($('#date1').val()),
        untilDate: new Date($('#date2').val()),
        rentAmount: $('#rentAmount').val(),
        dueDateResult: $('#date1'),
        calcUntilResult: $('#date2')
    };
    t = new workings(config);


    $("#dueDateFirstMissed").html(t.dueDateFirstPaymentResult);
    $("#untilDateCalculate").html((t.calculatedUntil));
    $("#numberDays").html(t.numberDays.toFixed(0));
    $("#numberperiods").html((t.numberPeriods));
    $("#amountDue").html("£" + (t.amountDue.toFixed(2)));
    $("#dailyRate").html("£" + ((t.dailyRate).toFixed(2)));
};

这是fiddle的链接，但请记住，我还没有写完计算！

任何帮助/指示都会非常感激！

提前致谢

Answer 1

在function

下面指定的变量中存在语法错误

function getNumberPeriods() {
        var periodLength = getPeriodLength();
        var calcDate = (options.untilDate);
        var calcYear = calcDate.getFullYear();
        var calcMonth = calcDate.getMonth();
        var calcDay = calcDate.getDate();
        var firstDate = (options.dueDate);
        var firstYear = firstDate.getFullYear();
        var firstMonth = firstDate.getMonth(); //this was firsyDate.getMonth()
        var firstDay = firstDate.getDate();
        .....
}

<强> DEMO

<强>更新

您可以在填写所有3个字段时更改您的值，否则您将在结果中获得 NaN ，您可以按以下方式执行此操作：

var dataBind = function () {
    if($("#date1").val()!="" && $("#date2").val()!="" && $('#rentAmount').val()!="") 
    { //If all the fields have values then get it done
    var config = {
        dueDate: new Date($('#date1').val()),
        untilDate: new Date($('#date2').val()),
        rentAmount: $('#rentAmount').val(),
        dueDateResult: $('#date1'),
        calcUntilResult: $('#date2')
    };
    console.log(config);
    t = new workings(config);

    $("#dueDateFirstMissed").html(t.dueDateFirstPaymentResult);
    $("#untilDateCalculate").html((t.calculatedUntil));
    $("#numberDays").html(t.numberDays.toFixed(0));
    $("#numberperiods").html((t.numberPeriods));
    $("#amountDue").html("£" + (t.amountDue.toFixed(2)));
    $("#dailyRate").html("£" + ((t.dailyRate).toFixed(2)));
    }
};

注意：您尚未在顶部的rentAmount文本框中输入ID 只需添加

<强> Updated demo

Answer 2

在您的JSFiddle中，您的getNumberPeriods函数中存在拼写错误，其中firsyDate.getMonth()应为firstDate.getMonth()。纠正这个似乎解决了这个问题。

作为旁注，我还要记住，有人输入的价值不是您的＆＃34;租金金额中的数字＆＃34;领域。目前这样做会在您的用户界面中产生NaN。

祝你好运！

更新事件处理程序上的jQuery无法正常工作，我无法弄清楚为什么

2 个答案: