Show only two decimals in calculator outcome

hans_spain · 11-09-2012, 04:12 PM

Hello Every1,

Having a problem here and seems I´m not able to solve it by myself.

I have a calculator that once an amount is entered it adds 5% to the figure entered each year.It then shows the results for 5, 10 and 15 years.

Have tried ToFixed(2) and Math.round but can´t get it to work. Here is the script for it:

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type='text/javascript'>//<![CDATA[

$(window).load(function(){
$("#calculate").on('click', function() {
var fee = $("#fee").val();
for (var i=0;i<5;i++) {
fee = fee * 1.05;
}
$("#five").html(fee);
for (var i=0;i<5;i++) {
fee = fee * 1.05;
}
$("#ten").html(fee);
for (var i=0;i<5;i++) {
fee = fee * 1.05;
}
$("#fifteen").html(fee);
});
});

//]]>

</script>

<label>fee</label>
<input type="text" id="fee"><br/>
<button id="calculate">Calculate</button><br/>
<label>five years</label>
<div id="five"></div><br/>
<label>ten years</label>
<div id="ten"></div><br/>
<label>fifteen years</label>
<div id="fifteen"></div>

Have tried it with this:

Code:

    var fee = $("#fee").val();
    //for (var i=0;i<5;i++) {
    // fee = fee * 1.05;
    //}

    var fee5 = Math.round( (fee * Math.pow( fee, 5 ))*100)/100;
    var fee10 = Math.round( (fee * Math.pow( fee, 10 ))*100)/100;
    var fee15 = Math.round( (fee * Math.pow( fee, 15 ))*100)/100;

And still no luck.

Could anyone here point me into the right direction?

Thanks in advance for your time and knowledge,

Greetings from Spain,
Hans

jmrker · 11-09-2012, 06:31 PM

Quote:

Originally Posted by hans_spain

Hello Every1,

Having a problem here and seems I´m not able to solve it by myself.

I have a calculator that once an amount is entered it adds 5% to the figure entered each year.It then shows the results for 5, 10 and 15 years.

Have tried ToFixed(2) and Math.round but can´t get it to work. Here is the script for it:

...

Have you tried .toFixed(2).

JS is case sensitive.

hans_spain · 11-19-2012, 04:02 PM

Hello jmrker,

No result, did use it like this : toFixed(2), even tried it like this : ToFixed(2)

Also tried it on various loations but still no luck

Thanks for your help anyway

niralsoni · 11-19-2012, 04:44 PM

Did you tried this? -

Code:

  fee5 = fee5.toFixed(2);

Philip M · 11-19-2012, 05:15 PM

Code:

<script type = "text/javascript">
var fee5 = 100;
for (var i=0; i<5; i++) {
var fee5 = fee5 * 1.05
}
alert (fee5.toFixed(2));

var fee10 = 100;
for (var i=0; i<10; i++) {
var fee10 = fee10 * 1.05
}
alert (fee10.toFixed(2));

var fee15 = 100;
for (var i=0; i<15; i++) {
var fee15 = fee15 * 1.05
}
alert (fee15.toFixed(2));

</script>

Not using a loop:-

Code:

var fee = 100;
var ratepc = 5;
var years = 5;
var fee5 = Math.round(fee*(Math.pow((1+ratepc/100),years))*100)/100;
alert (fee5);
years = 10;
var fee10 = Math.round(fee*(Math.pow((1+ratepc/100),years))*100)/100;
alert (fee10);
years = 15;
var fee15 = Math.round(fee*(Math.pow((1+ratepc/100),years))*100)/100;
alert (fee15);

Another way:-

Code:

var fee = 100;
var ratepc = 5;
var fee5 = calc(5);
alert (fee5);
var fee10 = calc(10);
alert (fee10);
var fee15 = calc(15);
alert (fee15);

function calc(years){
var result = Math.round(fee*(Math.pow((1+ratepc/100),years))*100)/100;
return result
}

jmrker · 11-19-2012, 08:52 PM

Quote:

Originally Posted by hans_spain

Hello jmrker,

No result, did use it like this : toFixed(2), even tried it like this : ToFixed(2)

Also tried it on various loations but still no luck

Thanks for your help anyway

Quote:

Originally Posted by niralsoni

Did you tried this? -

Code:

  fee5 = fee5.toFixed(2);

That should have worked.

If not, show specifically the code you are using.

Old Pedant · 11-19-2012, 11:26 PM

Probably using it in wrong place.

Should be used *ONLY* when setting the "html" value.

That is, ONLY these places:

Code:

    $("#five").html(fee.toFixed(2));
    for (var i=0;i<5;i++) { fee = fee * 1.05; }
    $("#ten").html(fee.toFixed(2));
    for (var i=0;i<5;i++) {fee = fee * 1.05;}
    $("#fifteen").html(fee.toFixed(2));

Old Pedant · 11-19-2012, 11:34 PM

You do have to wonder why people use jQuery for something this simple. Drag in the entire jQuery library to avoid using document.getElementById!

Code:

<html:
<body>
<label>fee</label><input type="text" id="fee"><br/>

<button id="calculate">Calculate</button><br/>

<label>five years</label><div id="y5"></div><br/>
<label>ten years</label><div id="y10"></div><br/>
<label>fifteen years</label><div id="y15"></div>

<script type="text/javascript">
(
  function( )
  {
      document.getElementById("calculate").onclick =
          function( )
          {
              var fee = Number(document.getElementById("fee").value);
              for ( var yr = 1; yr <= 15; ++yr )
              {
                   fee *= 1.05;
                   if ( yr % 5 == 0 ) 
                   {
                       document.getElementById("y" + yr).innerHTML = fee.toFixed(2);
                   } 
              }
         }
  }
)();
</script>
</body>
</html>

hans_spain · 12-04-2012, 05:22 PM

Old Pedant, Thanks

That did it, and learned a bit more thanks to you guys.

Now have another question on the same calulator, is it also possible to have the total result after fifteen years show? The three seperate figures ánd a sort of grand total?

Thank you all for your attention,
Greets from Spain

jmrker · 12-04-2012, 06:02 PM

Adding to 'Old Pedant's code...

Code:

<html:
<body>
<label>fee</label><input type="text" id="fee">  
<button id="calculate">Calculate</button><p/>

<label>five years</label> <span id="y5"></span><p/>
<label>ten years</label> <span id="y10"></span><p/>
<label>fifteen years</label> <span id="y15"></span><p/>
Total Fees: <span id="totalFees"></span><p/>

<script type="text/javascript">
( function( ) {
    document.getElementById("calculate").onclick = function( ) {
      var total = 0;
      var fee = Number(document.getElementById("fee").value);
      for ( var yr = 1; yr <= 15; ++yr ) {
        fee *= 1.05;
        if ( yr % 5 == 0 ) {
          document.getElementById("y" + yr).innerHTML = fee.toFixed(2);
          total += fee.toFixed(2) * 1;
        } 
      }
      document.getElementById('totalFees').innerHTML = total.toFixed(2);
    }
  }
)();
</script>
</body>
</html>