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>
Change
interesttointerest.toFixed(2)when you're creating the output string.