Reputation: 323
HTML
<table>
<tr>
<td><b>Interest Rate</b></td>
<td><b>Amount</b></td>
</tr>
<tr>
<td>1%</td>
<td>€0 - €1,000</td>
</tr>
<tr>
<td>5%</td>
<td>€1,001 - €5,000</td>
</tr>
<tr>
<td>15%</td>
<td>> €5,001</td>
</tr>
</table><br />
<label>Please enter an amount to deposit</label>
<input type="number" id="amount" name="txtAmount" />
<hr />
<table>
<tr>
<td><b>Item</b></td>
<td><b>Amount</b></td>
</tr>
<tr>
<td>Sub-Total (Interest + Amount)</td>
<td><input type="number" id="txtSubTotal" name="txtSubTotal" readonly /></td>
</tr>
<tr>
<td>Interest Amount</td>
<td><input type="number" id="txtInterest" name="txtInterest" readonly /></td>
</tr>
<br />
<input type="button" name="btnCalc" id="btnCalc" onclick="Calc()" value="Calculate Amount"/>
JS
function Calc() {
var amount = parseFloat(document.getElementById('txtAmount').value);
var int;
var intTotal;
if (amount < 1000) {
int = (amount * 0.01);
intTotal = (int + amount);
document.getElementById('txtSubTotal').innerHTML = intTotal;
document.getElementById('txtInterest').innerHTML = int;
}
else if (amount > 1001 && amount < 5000) {
int = (amount * 0.05);
intTotal = (int + amount);
document.getElementById('txtSubTotal').innerHTML = intTotal;
document.getElementById('txtInterest').innerHTML = int;
}
else {
int = (amount * 0.15);
intTotal = (int + amount);
document.getElementById('txtSubTotal').innerHTML = intTotal;
document.getElementById('txtInterest').innerHTML = int;
}
}
I need to calculate the interest rate based on users input. There are three rates of interest and once calculated, it will display the interest rate and the total but i seem to be missing something in my code as it won't display anything.
Upvotes: 0
Views: 35
Reputation: 28475
You have a small markup issue. The id is referenced in JS is different from the one in markup.
Update markup from
<input type="number" id="amount" name="txtAmount" />
to
<input type="number" id="txtAmount" name="txtAmount" />
Also, you need to update your script for setting value to input boxes.
Update from
document.getElementById('txtSubTotal').innerHTML = intTotal;
document.getElementById('txtInterest').innerHTML = int;
to
document.getElementById('txtSubTotal').value = intTotal;
document.getElementById('txtInterest').value = int;
Working version - http://plnkr.co/edit/cHSdLBf3cvft4Q9gQBiu?p=preview
Upvotes: 1