I'm having an issue with my javascript code for a simple interest calculator. Every time I try to calculate the amount, it keeps returning NaN. It seems like the code is treating the + as if I'm trying to concatenate strings, and I'm not sure how to fix that.
I've attempted to use parseInt and parseFloat, but the problem persists. Can someone please point out what I'm doing wrong?
Below is the code:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Simple Interest Calculator</title>
</head>
<body>
<div class="container">
<h1>Simple Interest Calculator</h1>
<form id="form1">
<label for="Amount"></label>
Amount <input type="number" id="principal">
<br/>
<br/>
<label for="Interest Rate"></label>
<label for="Interest Rate">Interest Rate</label>
<input onchange=updateValue(this) type="range" id="rate" min="1" max="20" step="0.25" default value="10.25">
<span id="rate_val">10.25%</span>
<br/>
<br/>
<label for="No. of Years"></label>
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/>
<br/>
<label for="Compute Interest"></label>
<button onclick="compute()">Compute Interest</button>
<br/>
<br/>
<span id="result"></span>
<br/>
<br/>
</form>
<br/>
<br/>
<footer>© Everyone Can get Rich.<br/>This Calculator belongs to </footer>
</div>
</body>
</html>
And here's the javascript:
<script>
let principalEl = document.querySelector("#principal");
let rateEl = document.querySelector("#rate");
let rateOutputEl = document.querySelector('#rate_val');
let yearsEl = document.querySelector("#years");
let formEl = document.querySelector('#form1');
let result = document.querySelector("#result");
formEl.addEventListener('submit', e => {
e.preventDefault();
if (!checkData())
return;
let principal = principalEl.value;
let rate = rateEl.value;
let year = yearsEl.value;
let interest = principal.value * years.value * rate.value / 100;
let amount = principal.value + interest.value;
let endYear = new Date().getFullYear() + parseInt(years.value);
result.innerHTML = `If you deposit ${principal},<br \>at an interest rate of ${rate}%<br \>You will receive an amount of ${amount},<br \>in the year ${endYear}<br \>`;
});
rateEl.addEventListener('input', e => {
rateOutputEl.textContent = e.target.value + '%';
});
function checkData() {
let principal = principalEl.value;
if (!principal || parseFloat(principal) < 0) {
alert("Enter a positive number");
principalEl.focus();
return false;
}
return true;
}
</script>