Question

我正在尝试为拖欠租金写一个非常简单的计算器。我查看并关注了关于日期选择器的codecademy教程，但仍然无法看到我出错的地方！

我还尝试让计算器在用户通过给出结果字段ID来填写任何详细信息时自动填充结果部分，但这也不起作用，我不知道为什么！

任何提示/提示将不胜感激。我将在下面发布我的HTML代码和我的JS，这里是我的JS小提琴的链接：https://jsfiddle.net/ezjp20/ak5hexnx/

HTML：

 <div class='tablerow'>
    <table width="700">
        <tr>
             <h2>Rent Arrears Calculator</h2>

        </tr>
        <tr>
            <th width="350" align="left"> <b>Amount of Rent Due Per Calendar Month</b> 
            </th>
            <th width="350" align="left">
                <input type="text" class="form-control" size="50" data-bind="rentAmount" placeholder="Amount">
            </th>
        </tr>
        <tr>
            <th width="350" align="left"><b>Due Date of First Missing Payment</b>

            </th>
            <th width="350" align="left">
                <div class="input-group">
                    <input type="text" id="date1" class="form-control date" size="150" data-bind="dueDate" placeholder="DD/MM/YYYY">
                </div>
            </th>
        </tr>
        <tr>
            <th width="350" align="left"><b>Arrears calculated Until</b>

            </th>
            <th width="350" align="left">
                <input type="text" id="date2" class="form-control date" size="150" data-bind="untilDate" placeholder="DD/MM/YYYY">
            </th>
        </tr>
        <tr></tr>
    </table>
    <p></p>
</div>
<table>
    <tr>

         <h2 class="title" width="700px">Results</h2>

     </tr>
     <tr class="results">
        <th class="tablecolumn" align="left" width="350px">Due Date of 1st Missed Payment</th>
        <th align="left" id="dueDateFirstMissed" />DD/MM/YYYY</tr>
    <tr class="results">
        <th class="tablecolumn" align="left" width="350px">Date Calculated Until</th>
        <th align="left" id="untilDateCalculate" />DD/MM/YYYY
        <tr class="results">
            <th class="tablecolumn" align="left" width="350px">Number of Days Late</th>
            <th align="left" id="numberDays" />0</tr>
        <tr class="results">
            <th class="tablecolumn" align="left" width="350px">Amount Due</th>
            <th align="left" id="amountDue" />£0.00</tr>
        <tr class="results">
            <th class="tablecolumn" align="left" width="350px">Daily Rate</th>
            <th align="left" id="dailyRate" />£0.00</tr>

使用Javascript：

 var t;
 var workings = function (options) {

function getDueDateFirst() {
    return (options.dueDate);
}

function getDateCalculatedUntil() {
    return (options.untilDate);
}

function getNumberDays() {
    return ((((options.dueDate).val()) - ((options.untilDate).val())) / (1000 * 60 * 60 * 24));
}

function getDailyRate() {
    return (((options.rentAmount).val()) * (12 / 365));
}

function getAmountDue() {
    return (getDailyRate()) * (getNumberDays());
}
return {
    dueDateFirst: getDueDateFirst(),
    dateCalculatedUntil: getDateCalculatedUntil(),
    numberDays: getNumberDays(),
    dailyRate: getDailyRate(),
    amountDue: getAmountDue()
};
};

var dataBind = function () {

var config = {
    dueDate: new Date($('*[data-bind="dueDate"]').val()),
    untilDate: new Date($('*[data-bind="untilDate"]').val()),
    rentAmount: $('*[data-bind="rentAmount"]').val()
};
t = new workings(config);

$("#dueDateFirstMissed").innerhtml(t.dueDateFirst);
$("#untilDateCalculate").html((t.dateCalculatedUntil));
$("#numberDays").html(t.numberDays.toFixed(0));
$("#amountDue").html(t.amountDue.toFixed(2));
$("#dailyRate").html((t.dailyRate).toFixed(2));
};
$(document).ready(function () {
$('#date1').datepicker();
$('#date2').datepicker();
});

$(".date1").datepicker({

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

$(".date2").datepicker({

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

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

Answer 1

包含jQuery。 jQuery UI需要它

<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>

Answer 2

现在检查javascript代码，它的工作原理。 JSFiddle

var t;
var workings = function (options) {

    function getDueDateFirst() {
        return options.dueDate;
    }

    function getDateCalculatedUntil() {
        return options.untilDate;
    }

    function getNumberDays() {
       //edited this line as it was giving negative value
       //changed options.unitlDate.val() to option.unitlDate similarly for options.dueDate
        return (options.untilDate - options.dueDate) / (1000 * 60 * 60 * 24);
    }

    function getDailyRate() {
        return options.rentAmount * (12 / 365);
    }

    function getAmountDue() {
        return getDailyRate() * getNumberDays();
    }
    return {
        dueDateFirst: getDueDateFirst(),
        dateCalculatedUntil: getDateCalculatedUntil(),
        numberDays: getNumberDays(),
        dailyRate: getDailyRate(),
        amountDue: getAmountDue()
    };
};

var dataBind = function () {

    var config = {
        dueDate: new Date($('#date1').val()),
        untilDate: new Date($('#date2').val()),
        rentAmount: $('[data-bind="rentAmount"]').val()
    };
    t = new workings(config);

    $("#dueDateFirstMissed").html(t.dueDateFirst);
    $("#untilDateCalculate").html((t.dateCalculatedUntil));
    $("#numberDays").html(t.numberDays.toFixed(0));
    $("#amountDue").html(t.amountDue.toFixed(2));
    $("#dailyRate").html((t.dailyRate).toFixed(2));
};
$(document).ready(function () {
    $("#date1").datepicker({
    //you were calling on event on a class 'date1' where as it was an id
    //changed changeDate to change
    }).on("change", function (e) {
        dataBind();
    });

    //you were calling on event on a class 'date2' where as it was an id
    $("#date2").datepicker({
    //changed changeDate to change
    }).on("change", function (e) {
        dataBind();
    });

});


//changed "keyup" to "change" event
$(document).on("change", "table input", function () {
    dataBind();
});

不确定为什么日期选择器小部件不起作用，也不知道为什么id选择器不是自动填充结果字段

2 个答案: