Question 192830 in Html Question posted in
Some basic documentation can be found here.

Html – Having trouble with toFixed()

I’m just putting together a basic interest calculator and I’m trying to use toFixed(2) to limit the result to two decimal places, but I can’t seem to figure out the proper spot to include it. All my attempts so far either cause the slider to no longer be responsive or clicking the button no longer provides the result. I would really appreciate some guidance.

Here’s Code

function compute() {
  //variables for the operation
  var principal = document.getElementById("principal").value;
  var rate = document.getElementById("rate").value;
  var years = document.getElementById("years").value;
  var interest = principal * years * rate / 100;
  var year = new Date().getFullYear() + parseInt(years);

  //if else statement to validate operation
  if (principal == undefined || principal <= 0) {
    alert("Enter a positive number");
    document.getElementById("principal").focus();
    return
  } else {
    var inr = "If you deposit <mark>" + "$" + principal + "</mark><br>";
    var ra = "at an interest rate of <mark>" + rate + "%</mark><br>";
    var am = "You will receive an amount of <mark>" + "$" + interest + "</mark><br>";
    var ye = "in the year <mark'>" + year + "</mark>";

    document.getElementById("result").innerHTML = inr + ra + am;
  }
}

function updateRate() {
  var rateval = document.getElementById("rate").value;
  document.getElementById("rate_val").innerText = rateval;
}
<!DOCTYPE html>

<head>
  <title> Simple Interest Calculator</title>
  <script src="js/simpleinterestcalc.js"></script>
  <link rel="stylesheet" href="css/simpleinterestcalc.css">
</head>
<div class="maindiv">
  <h1>Simple Interest Calculator</h1>

  Amount <input type="number" id="principal"> <br/> Rate <input type="range" id="rate" min="1" max="20" step="0.01" value="10.25" onchange=u pdateRate()>
  <span id="rate_val">10.25</span><span>%</span> <br/> No. of Years
  <select id="years">
    <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>
  </select> <br/>
  <span id="result"></span><br>

  <button onclick="compute()">Compute Interest</button>
</div>
<footer>

  © This Calculator belongs to -- Jake B --


</footer>

</html>
Tags:

2

Answers


  1. 0

    Change interest to interest.toFixed(2) when you’re creating the output string.

        var am = "You will receive an amount of <mark>" + "$" + interest.toFixed(2) + "</mark><br>";
    Login or Signup to reply.
  2. 0

    I recommend to apply the toFixed while calculating the interest

    var interest = (principal * years * rate / 100).toFixed(2); // Limit to two decimal places

    There are several reasons why I recommend to avoid applying the toFixed(2) during string concatenation

    1. Templates have a tendency to get complex, and removing logic for them helps to keep them tidy.
    2. You might want to use the interest in other places in the code and it’s important to keep it consistent.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search