JavaScript 新手,无法理解这个练习:需要修改 JavaScript,以便它提供选项按钮。当用户选择年利率按钮时,应用程序应复合年利率,当用户单击每月按钮时,应用程序应复合月利率。
我还需要在文本框中显示月度和年度复合计算的结果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Future Value Calculator</title>
<style type="text/css"> @import url("future_value.css");
</style>
<script type="text/javascript" src="future_value.js"></script>
</head>
<body>
<div id="content">
<h1>Future Value Calculator</h1>
<p><input type="radio" name="calctype" id="monthly"
value="monthly" checked />Monthly Interest</p>
<p><input type="radio" name="calctype" id="yearly"
value="yearly" />Yearly Interest</p>
<p>Enter the values below and click "Calculate".</p>
<label for="investment">One-Time Investment:</label>
<select name="investment" id="investment"
<optgroup label="">
<option value="1000">$1,000</option>
<option value="5000">$5,000</option>
<option value="10000">$10,000</option>
<option value="25000">$25,000</option>
<option value="other">Other value</option>
</optgroup>
</select><br />
<label for="rate">Yearly Interest Rate:</label>
<select name="rate" id="rate"
<optgroup label="">
<option value="4%">4%</option>
<option value="6%">6%</option>
<option value="8%">8%</option>
<option value="10%">10%</option>
</optgroup>
</select><br />
<label for="years">Number of Years:</label>
<input type="text" id="years" /><br />
<label for="futureValue">Future Value:</label>
<input type="text" id="futureValue" disabled="disabled" /><br />
<label> </label>
<input type="button" id="calculate" value="Calculate" /><br />
<p><input type="checkbox" name="display" id="display" value="display" checked />
Display both monthly and yearly results in the text area.</p>
<p>Results</p>
<textarea name="results" id="results" rows="4" cols="50"></textarea>
</div>
</body>
</html>
这是JavaScript
var $ = function (id) {
return document.getElementById(id);
}
var calculate_click = function () {
var investment = parseFloat( $("investment").value );
var annualRate = parseFloat( $("rate").value );
var years = parseInt( $("years").value );
$("futureValue").value = "";
if (isNaN(investment) || investment <= 0) {
alert("Investment must be a valid number\nand greater than zero.");
} else if(isNaN(annualRate) || annualRate <= 0) {
alert("Annual rate must be a valid number\nand greater than zero.");
} else if(isNaN(years) || years <= 0) {
alert("Years must be a valid number\nand greater than zero.");
} else {
var monthlyRate = annualRate / 12 / 100;
var months = years * 12;
var futureValue = investment;
for ( i = 1; i <= months; i++ ) {
futureValue = futureValue * (1 + monthlyRate);
}
$("futureValue").value = futureValue.toFixed(2);
}
if ( $("monthly").checked ) {
$("futureValue").value = futureValueMonthly.toFixed(2);
} else {
$("futureValue").value = futureValueYearly.toFixed(2);
}
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("investment").focus();
$("monthly").onclick;
}