0

I have a simple mortgage calculator and i want the final loan rate to be display rounded to two decimals.

Is it possible to achieve that? I'm ne to JS and i find out that i can use the Math.round(value*100)/100 but i don't know exactly how to insert this funcion inside my js to display the correct rate inside the "#amount2"

Here's my code, hope that someone can help me. Thank you.

$(document).ready(function() {
  function update() {
    $interesseannuo = 1.70;
    $C = $("#amount").val();
    $anni = $("#anni").val();
    $i = $interesseannuo / 12 / 100;
    $n = $anni * 12;
    $amount2 = $C * $i / (1 - Math.pow(1 + $i, -$n));


    $("#amount2").val($amount2);

  }

  debugger;

  $("#slider1").slider({
    max: 200000,
    min: 20000,
    step: 5000,
    slide: function(event, ui) {

      $("#amount").val(ui.value);
      update();

    }
  });





  $("#slider2").slider({
    max: 30,
    min: 10,
    step: 5,

    slide: function(event, ui) {

      $("#anni").val(ui.value);
      update();
    },
  });

  $("#anni").val($("#slider2").slider("value"));

  $("#anni").change(function(event) {
    var data = $("#anni").val();
    if (data.length > 0) {
      if (parseInt(data) >= 0 && parseInt(data) <= 31) {
        $("#slider2").slider("option", "value", data);
      } else {
        if (parseInt(data) < 1) {
          $("#anni").val("1");
          $("#slider2").slider("option", "value", "1");
        }
        if (parseInt(data) > 31) {
          $("#anni").val("31");
          $("#slider2").slider("option", "value", "31");
        }
      }
    } else {
      $("#slider2").slider("option", "value", "1");
    }
  });

  update();
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js" type="text/javascript"></script>



Totale mutuo (€)
<div id="slider1"></div>
<input type="text" id="amount" value="20000" /><br /><br /> Durata mutuo (anni)
<div id="slider2"></div>


<input type="text" id="anni" value="10" /><br /><br /> la Tua rata
<input id="amount2" type="text" /><br /><br />
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
Stefano Zanetti
  • 123
  • 11

2 Answers2

2

Phew, there. I had to rewrite parts of your code, cache jQuery objects, etc. but now it works and it's cleaner. Any reason why you use an old jQuery v1.12 (over 2 years old) ?

const $amount = $("#amount"),
  $amount2 = $("#amount2"),
  $anni = $("#anni"),
  $slider1 = $("#slider1"),
  $slider2 = $("#slider2");

function update() {
  let interesseannuo = 1.70,
    C = $amount.val(),
    anni = $anni.val(),
    i = interesseannuo / 12 / 100,
    n = anni * 12,
    amount2 = C * i / (1 - Math.pow(1 + i, -n));

  $amount2.val(amount2.toFixed(2));
}

$slider1.slider({
  max: 200000,
  min: 20000,
  step: 5000,
  slide: function(event, ui) {
    $amount.val(ui.value);
    update();
  }
});

$slider2.slider({
  max: 30,
  min: 10,
  step: 5,
  slide: function(event, ui) {
    $anni.val(ui.value);
    update();
  },
});

$anni
  .val($slider2.slider("value"))
  .change(event => {
    var value = parseInt(event.target.value);
    if (value.length) {
      if (value >= 0 && value <= 31) {
        $slider2.slider("option", "value", data);
      } else {
        if (value < 1) {
          $anni.val("1");
          $slider2.slider("option", "value", "1");
        }
        if (value > 31) {
          $anni.val("31");
          $slider2.slider("option", "value", "31");
        }
      }
    } else {
      $slider2.slider("option", "value", "1");
    }
  });

update();
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js" type="text/javascript"></script>



Totale mutuo (€)
<div id="slider1"></div>
<input type="text" id="amount" value="20000" /><br /><br /> Durata mutuo (anni)
<div id="slider2"></div>


<input type="text" id="anni" value="10" /><br /><br /> la Tua rata
<input id="amount2" type="text" /><br /><br />
Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63
  • thank you, it works fine and the code is much cleaner! no particular reasons to use this jquery, i've found part of the code online and it used that library.. you suggest to update it? – Stefano Zanetti Jul 12 '18 at 13:12
  • can you help me with another simple question? as you can see i've changed the input tag "amount2" into a div but it's not working.. Plus i want that even the other input tag (#anni and #amount) to be simple div.. is this possible? – Stefano Zanetti Jul 12 '18 at 13:42
  • `you suggest to update it?` --> Well yes, obviously. Why would you use an outdated library? Use jQuery 3. `As you can see i've changed the input tag "amount2" into a div` --> Yeah, you did that by editing my answer, thus breaking it, so I rejected the change... `.val()` works for inputs because it acts on the `value` attribute. If you want to set the text inside a div, use `.text()` or `.html()` – Jeremy Thille Jul 14 '18 at 08:46
0

This might work:

Math.round(value*100)/100).toFixed(2);

Here is a link to a further discussion if this doesn't help: Discussion

Sir Catzilla
  • 321
  • 3
  • 18