Reputation: 680

jquery multiplication - behind the scene calculation

I have this calculator:

This is my 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>

I have this function to calculate the sum of daily flexi acc

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
}

In order to get the value for field: sum of daily flexi account balance - the calculation will be daily flexi account balance * num of days - the result is rounded up to the nearest hundredth.

FOR EXAMPLE daily flexi account balance is : 265806, num of day : 31, the sum of daily flexi acc balance will be : 8,239,986 and the correct output will be 8,240,000

for some reason I don't think my calculation is outputting the correct amount because I'm getting NaN

Upvotes: 2

Answers (3)

d.coder

Reputation: 2038

I have tried your logic in jsfiddle here after modifying event bindings. And it is working same as your example. Then what is the problem.

Here is my JS changes:

$(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);
  }
});

Upvotes: 0

Tibrogargan

Reputation: 4603

Change the number of days dropdown, it will log the output of your calculation, which looks correct (i.e. No NaN)

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);

<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>

Upvotes: 2

Adam Pietrasiak

Reputation: 13184

The problem is with Math.round.

You're using Math.round(resultDaysFlexi/100)*100 - so you're rounding it before final multiplication by 100.

Try to remove rounding or apply it only to final result.

Another useful tip is to add console.log after every step of calculation and check what is current value of your calculation, so you can see when is it starting to go wrong.

Upvotes: 0

jquery multiplication - behind the scene calculation

Answers (3)

Related Questions