My javascript code for a simple interest calculator keeps return NaN for the amount whenever I try to calculate it. It seems like the code assumes Im trying to concatenate a string whenever it sees the and I dont know what to do about that.
I have tried to use parseInt and parseFloat but its the same issue.
Can someone please tell me what Im doing wrong?
here 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 >
<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>
<!-- fill in the rest of the values-->
</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 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>
CodePudding user response：
When you take value from variable you don't have to add .value just write name of the variable. I know that it can also be reference to element with that id in visual studio code but then id interest doesn't exist. Change it
let interest = principal.value * years.value * rate.value / 100;
let amount = principal.value interest.value;
to it
let interest = principal * year * rate / 100;
let amount = principal interest;
CodePudding user response：
<!DOCTYPE html>
<html>
<head>
<title>Simple Interest Calculator</title>
</head>
<body>
<div >
<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>
<!-- fill in the rest of the values-->
</select>
<br />
<br />
<label for="Compute Interest"></label>
<button type="submit">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>
<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 * year * rate) / 100;
let amount = parseFloat(principal) parseFloat(interest);
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>