Question

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>&nbsp;</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;
}

选中单选按钮后运行JavaScript计算

0 个答案: