Question

我有这个计算器：

这是我的HTML：

<div class="row">
    <div class="twenty columns">
        <h2 class="secondary-title text-red2">Mortgage Utilisation Calculator</h2>
        <form>
            <div class="row forminput">
                <div class="ten columns">
                    <p class="slider-label">Daily Flexi Account Balance (RM)</p>
                    <input type="text" class="daily-flexi-accbalance strictly-numbers" value="200000" />
                </div>
                <div class="ten columns">
                    <p class="slider-label">Number of Days in Month</p>
                    <div class="field type-dropdown">
                        <div class="picker picker-dd2">
                            <select class="dropdown2 numdays-month">
                                <option value="0">Please select</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="ten columns">
                    <p class="slider-label">Current Facility Limit (RM)</p>
                    <input type="text" class="curr-facilitylimit numeric-only" value="500000" />
                </div>
                <div class="ten columns">
                    <p class="slider-label">Excess Payment (RM)</p>
                    <input type="text" class="curr-facilitylimit numeric-only" value="" />
                </div>
            </div>
        </form>

        <div class="row bg-gray12">
            <div class="ten columns bg-gray12 data-box2">
                <div class="row">
                    <div class="twelve columns">Sum of Daily Flexi Account Balance</div>
                    <div class="eight columns text-right calc-result-sumflexiacc " data-prefix="RM " data-suffix="">RM 0</div>
                </div>
            </div>
            <div class="ten columns bg-gray11 data-box2">
                <div class="row">
                    <div class="twelve columns">Monthly Utilisation Rate</div>
                    <div class="eight columns text-right calc-result-mthly-utilisationrate text-right" data-prefix="RM " data-suffix="">0 %</div>
                </div>
            </div>
        </div>

        <!-- <div class="row bg-gray9 data-box2 font-brighter">
            <div class="fifteen columns ">Total Amount Payable</div>
            <div class="five columns text-right calc-result-totalpayable" data-prefix="RM " data-suffix="">RM 0</div>

        </div> -->

    </div>
</div>

我有这个功能来计算每日灵活性的总和

function calcSumDailyFlexiAccBalance() {
    var numDaysMonth;

    $(".numdays-month").on('change', function() {
       numDaysMonth =   parseInt($(".numdays-month").val(), 10);
    });

    var dailyFlexi = parseInt($(".daily-flexi-accbalance").val(), 10);
    var resultDaysFlexi = numDaysMonth * dailyFlexi;
    var roundResult = Math.round(resultDaysFlexi/100)*100
}

为了获得字段的值：每日灵活帐户余额的总和 - 计算将是每日灵活帐户余额*天数 - 结果四舍五入到最接近的百分之一。

例如每日弹性账户余额为：265806，天数：31，每日灵活性余额的总和为：8,239,986，正确的输出为8,240,000

出于某种原因，我不认为我的计算输出的数量正确，因为我得到了NaN

Answer 1

更改下拉天数，它会记录您的计算结果，看起来是正确的（即无NaN）

＆＃13;

function init() {
	$(".numdays-month").on('change',
		function() {
			var numDaysMonth;
			numDaysMonth = parseInt($(".numdays-month").val(), 10);
			var dailyFlexi = parseInt($(".daily-flexi-accbalance").val(), 10);
			var resultDaysFlexi = numDaysMonth * dailyFlexi;
			var roundResult = Math.round(resultDaysFlexi/100)*100
			console.log(roundResult);
		}
	);
}

$(document).ready(init);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
     <div class="row">

            <div class="twenty columns">
                <h2 class="secondary-title text-red2">Mortgage Utilisation Calculator</h2>
                <form>
                    <div class="row forminput">

                        <div class="ten columns">
                            <p class="slider-label">Daily Flexi Account Balance (RM)</p>
                            <input type="text" class="daily-flexi-accbalance strictly-numbers" value="200000" />
                        </div>
                        <div class="ten columns">
                                <p class="slider-label">Number of Days in Month</p>
                                <div class="field type-dropdown">
                                    <div class="picker picker-dd2">
                                        <select class="dropdown2 numdays-month">
                                            <option value="0">Please select</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                            <option value="13">13</option>
                                            <option value="14">14</option>
                                            <option value="15">15</option>
                                            <option value="16">16</option>
                                            <option value="17">17</option>
                                            <option value="18">18</option>
                                            <option value="19">19</option>
                                            <option value="20">20</option>
                                            <option value="21">21</option>
                                            <option value="22">22</option>
                                            <option value="23">23</option>
                                            <option value="24">24</option>
                                            <option value="25">25</option>
                                            <option value="26">26</option>
                                            <option value="27">27</option>
                                            <option value="28">28</option>
                                            <option value="29">29</option>
                                            <option value="30">30</option>
                                            <option value="31">31</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        <div class="ten columns">
                            <p class="slider-label">Current Facility Limit (RM)</p>
                            <input type="text" class="curr-facilitylimit numeric-only" value="500000" />
                        </div>
                        <div class="ten columns">
                            <p class="slider-label">Excess Payment (RM)</p>
                            <input type="text" class="curr-facilitylimit numeric-only" value="" />
                        </div>

                    </div>
                </form>

                <div class="row bg-gray12">
                    <div class="ten columns bg-gray12 data-box2">
                        <div class="row">

                            <div class="twelve columns">Sum of Daily Flexi Account Balance</div>
                            <div class="eight columns text-right calc-result-sumflexiacc " data-prefix="RM " data-suffix="">RM 0</div>
                        </div>

                    </div>

                    <div class="ten columns bg-gray11 data-box2">
                        <div class="row">

                            <div class="twelve columns">Monthly Utilisation Rate</div>
                            <div class="eight columns text-right calc-result-mthly-utilisationrate text-right" data-prefix="RM " data-suffix="">0 %</div>
                        </div>

                    </div>
                </div>

                <!-- <div class="row bg-gray9 data-box2 font-brighter">
                    <div class="fifteen columns ">Total Amount Payable</div>
                    <div class="five columns text-right calc-result-totalpayable" data-prefix="RM " data-suffix="">RM 0</div>

                </div> -->

            </div>
        </div></body>

＆＃13;

Answer 2

问题在于Math.round。

您正在使用Math.round(resultDaysFlexi/100)*100 - 因此您需要在最终乘法100之前对其进行舍入。

尝试删除舍入或仅将其应用于最终结果。

另一个有用的提示是在每一步计算后添加console.log，并检查计算的当前值是什么，这样你就可以看到它何时开始出错。

Answer 3

我在修改事件绑定后在jsfiddle here中尝试过你的逻辑。它与你的例子一样工作。那问题是什么。

这是我的JS变化：

$(document).ready(function(e) { 
  $(".numdays-month").on('change', function() {
    calcSumDailyFlexiAccBalance();
  });

  function calcSumDailyFlexiAccBalance(){
    var numDaysMonth;

    numDaysMonth = parseInt($(".numdays-month").val(), 10);

    var dailyFlexi = parseInt($(".daily-flexi-accbalance").val(), 10);
    var resultDaysFlexi = numDaysMonth * dailyFlexi;
    var roundResult = Math.round(resultDaysFlexi/100)*100;
    $('.calc-result-sumflexiacc').html(roundResult);
  }
});

jquery乘法 - 在场景计算后面

3 个答案: