每當我嘗試計算金額時，我用于簡單利息計算器的 javascript 代碼都會回傳 NaN。似乎代碼假設我在看到 時嘗試連接一個字串，但我不知道該怎么做。
我曾嘗試使用 parseInt 和 parseFloat 但它是同樣的問題。
有人可以告訴我我做錯了什么嗎？
這是代碼；
<!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>
和 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>
uj5u.com熱心網友回復：
當您從變數中獲取值時，您不必添加.value只寫變數的名稱。我知道它也可以參考具有該 id 的元素，visual studio code但隨后 id 興趣不存在。更改
let interest = principal.value * years.value * rate.value / 100;
let amount = principal.value interest.value;
對它
let interest = principal * year * rate / 100;
let amount = principal interest;
uj5u.com熱心網友回復：
<!DOCTYPE html>
<html>
<head>
<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>
<!-- 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/511537.html
上一篇：在R中處理非常精確的數字