Question

我正在尝试重新创建此mortgage calculator script on jsfiddle，但是当我运行它的副本时，我没有输出。我是jquery的新手，所以它可能很简单。这是我的整个页面，所有代码都是从jsfiddle逐字复制的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

    <title>Mortgage Calc Testing Yay</title>
    <meta name="description" content="">
    <meta name="author" content="">
<style>
label, div input, div select {
    display: block;
    margin: 0.5em 0;
}

label {
    font-weight: bold;
}

form p {
    margin: 0.5em 0;
}
</style>

</head>
<body>

<form action="#" method="post" id="test">
    <p><strong>Please insert decimals using the dot notation, e.g. <code>5.9</code></strong></p>
    <div>
        <label for="balance">Loan balance (&euro;)</label>
        <input name="balance" id="balance" type="text" />
    </div>
    <div>
        <label for="rate">Interest rate (%)</label>
        <input name="rate" id="rate" type="text" />
    </div>
    <div>
        <label for="term">Loan term (years)</label>
        <input name="term" id="term" type="text" />
    </div>
    <div>
        <label for="period">Period</label>
        <select name="period" id="period">
            <option>Select</option>
            <option value="12">Monthly</option>
            <option value="6">Bimonthly</option>
        </select>
    </div>
    <p><input type="submit" id="submit" name="submit" value="Calculate" /></p>  
</form>

<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

(function($) {
    $.fn.calculateMortgage = function(options) {
        var defaults = {
            currency: '&euro;',
            params: {}
        };
        options = $.extend(defaults, options);

        var calculate = function(params) {
            params = $.extend({
                balance: 0,
                rate: 0,
                term: 0,
                period: 0
            }, params);

            var N = params.term * params.period;
            var I = (params.rate / 100) / params.period;
            var v = Math.pow((1 + I), N);
            var t = (I * v) / (v - 1);
            var result = params.balance * t;

            return result;

        };

        return this.each(function() {
            var $element = $(this);
            var $result = calculate(options.params);
            var output = '<p>' + options.currency + ' ' + $result.toFixed(2) + '</p>';
            $(output).appendTo($element);

        });

    };

})(jQuery);

$(function() {
    $('#test').on('submit', function(e) {
        e.preventDefault();
        var $params = {
            balance: $('#balance').val(),
            rate: $('#rate').val(),
            term: $('#term').val(),
            period: $('option:selected', '#period').val()
        };

        $(this).calculateMortgage({
            params: $params
        })

    });

});

</script>

</body>
</html>

我已经尝试更改我的jquery版本，但这没有帮助。

感谢您的帮助。

jQuery按揭计算器 - 没有输出

0 个答案: