Twitter Bootstrap Question posted in

Math round and display in a div-Twitter bootstrap

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 />
Tags:

2

Answers


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

    Login or Signup to reply.
  2. 0

    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 />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search