0
私は車のローンの計算機を作っていますし、これは、行うことにメンターされているものです：あなたが借りたい金額を入力し、テキストボックスに表示するフィギュア - javascriptの
。
ドロップダウンボックスで、ローン期間を選択します。あなたは3年間率 上で借りたい場合は毎年、32.50パーセント
結果はその後、毎月の返済のために表示され、その後、総返済額であるたとえばので 返済4月を表します。
私は総返済額を表示する方法を見つけようとしています。私が知りたいのは、例えば4年間で融資期間を選択すると、それは他の総返済オプションを隠すことになるということですか？およびその逆。現在のところ、すべての返済額が表示されます。ひとつのアイデアはnodeに自分.style.displayプロパティを変更することにより、いずれか<select>のchangeイベントに反応して、目的の要素を非表示にしたり、表示するようになり
マイHTML
<!-- main body -->
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-offset-2 col-sm-8 col-xs-12">
<form class="credit">
<div class="form-group">
<!-- amount to borow -->
<label for="amount">Amount To Borrow</label>
<div class="input-group">
<div class="input-group-addon">EUR</div>
<input id="amount" type="number" min="1" max="1000000" onchange="computeLoan()" class="form-control validate" id="amount" placeholder="Enter amount" required>
</div>
</div>
<!-- End amount to borrow -->
<!-- dropdown -->
<div class="dropdown">
<select id= "rate" onchange="computeLoan()">
<option value="" disabled="disabled" selected="selected">Select A Loan Term</option>
<span class="caret"></span></button>
<ul class="dropdown-menu">
<option value="46.64">2 Years @ 46.64%</option>
<option value="32.50">3 Years @ 32.50%</option>
<option value="26.08">4 Years @ 26.08%</option>
<option value="22.00">5 Years @ 22.00%</option>
</ul>
</select>
</div>
<!-- end dropdown -->
<br>
<!-- display the results -->
<h3 id="monthlyPayment"></h3>
<h4 id="totalPayment"></h4>
<!-- end display results -->
<h4 id="threeYears"></h4>
<h4 id="fourYears"></h4>
<h4 id="fiveYears"></h4>
</div>
</div>
</form>
<!-- end form -->
</div>
</div>
</div>
私のJavascriptの
// conditional logic
function computeLoan()
{
// grab the selected value of the dropdown box
var r = document.getElementById("rate");
var rateSelected = parseFloat(r.value);
//grab elements by their ID
var amount = parseFloat(document.getElementById('amount').value);
//do the maths do find the percentage
var interest = (amount * (rateSelected * .01))
//Monthly payment
var monthlyPayment = ((amount/1000) * rateSelected).toFixed(2);
monthlyPayment = monthlyPayment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
// total payment
var totalPayment = (monthlyPayment * 24).toFixed(2);
totalPayment = totalPayment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var threeYears = (monthlyPayment * 36).toFixed(2);
totalPayment = totalPayment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var fourYears = (monthlyPayment * 48).toFixed(2);
totalPayment = totalPayment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var fiveYears = (monthlyPayment * 60).toFixed(2);
totalPayment = totalPayment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
// display the results
document.getElementById('monthlyPayment').innerHTML = "Monthly Repayment: €"+monthlyPayment;
document.getElementById('totalPayment').innerHTML = "Total Repayment for 2 Years: €"+totalPayment;
document.getElementById('threeYears').innerHTML = "Total Repayment for 3 Years: €"+threeYears;
document.getElementById('fourYears').innerHTML = "Total Repayment for 4 Years: €"+fourYears;
document.getElementById('fiveYears').innerHTML = "Total Repayment for 5 Years: €"+fiveYears;
}