Math round and display in a div

Question

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

Answer 1

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

Answer 2

This might work:

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

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