Javascript: Interest based on three rates

Question

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.

Answer 1

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