Javascript foreach (work out interest)

Question

I'm trying to work out the interest of values that're inputed.

I ask for the principle rate, the rate in percentage and the number of years.

I want to figure out their simpleInterest and compundInterest.

I want it to display the result value for each year in a table.

I have a table that's getting the number of years when I type in the amount, for example 15. When I type in 15, it shows 15 rows but they're all the same.

I need it to work out the value for each year on a each row.

My current code is only showing 15 years as the same result.

My code :

<div class="container">
<div id="content">
    <h2 class="interestOutput">Table for $<span id="interestPrinciple">Loading...</span> at <span id="interestRate">Loading...</span>%
    </h2>
    <table>
        <tr>
            <th>Year</th>
            <th>SimpleInterest</th>
            <th>CompoundInterest</th>
        </tr>
        <div id="tableResult">

        </div>
    </table>
</div>

<script type="text/javascript">
    if (document.readyState = "complete") {
        var principle = localStorage.getItem("principle");
        var rate = localStorage.getItem("rate");
        var years = localStorage.getItem("years");

        var simple_interest = principle * (rate / 100) * years;
        var compound_interest = principle * (1 + rate/100);

        /*
        var list = computeSchedule(p, rate, 12, y, monthlyPayment);
        var tables = "";
        for (var i = 0; i < list.length; i++) {
            tables += "<tr>" +
                "<td>" + list[i][0] + "</td>" +
                "<td>" + list[i][1] + "</td>" +
                "<td>" + list[i][2] + "</td>" +
                "<td>" + list[i][3] + "</td>" +
                "<td>" + list[i][4] + "</td>" +
                "</tr>";
        }
        document.getElementById("demo").innerHTML = '<table>' + tables + '</table>';
        */

        var tables = "";
        for (var i = 0; i < years; i++) {
            tables +=
                "<tr>" +
                "<td>" + years + "</td>" +
                "<td>" + simple_interest + "</td>" +
                "<td>" + compound_interest + "</td>"+
                "</tr>";
        }
        document.getElementById("tableResult").innerHTML = '<table>' + tables + '</table>';

        document.getElementById("interestPrinciple").innerHTML = principle;
        document.getElementById("interestRate").innerHTML = rate;
        //document.getElementById("gradeOutput").innerHTML = years;
    }
</script>

 I have now sorted the simple interest column but the compound column is not correct.

I was given this information : The formula to compute simple interest is interest = principal * (rate/100) * years. Just add the principal to the interest to generate the amount to display. The formula to compute compound interest is FinalAmount = principal * (1 + rate/100)Years. Notice that you do not need to add the principal in this case. Your program must read the principal amount, rate (%), and the maximum number of years (see Web Site Snapshots/Video below). Use the following messages to read the appropriate values:

My updated code is :

<div class="container">
<div id="content">
<h2 class="interestOutput">Table for $<span id="interestPrinciple">Loading...</span> at <span id="interestRate">Loading...</span>%
        </h2>
        <div id="tableResult"></div>
    </div>
</div>

<script type="text/javascript">
    if (document.readyState = "complete") {
        var principle = localStorage.getItem("principle");
        var rate = localStorage.getItem("rate");
        var years = localStorage.getItem("years");
        var tables = "";
        for (var i = 0; i < years; i++) {

            var simple_interest = principle * (rate / 100) * i;
            var compound_interest = principle * (1 + (rate/100));

            var final_simple = compound_interest + simple_interest;
            var add_extra = 1 + (rate/100);
            var final_compound = final_simple + add_extra;

            tables +=
                "<tr>" +
                "<td>" + (i + 1) + "</td>" +
                "<td>$" + final_simple + "</td>" +
                "<td>$" + final_compound + "</td>"+
                "</tr>";
        }
        document.getElementById("tableResult").innerHTML = '<table><tr><th>Year</th><th>SimpleInterest</th><th>CompoundInterest</th></tr>' + tables + '</table>';

        document.getElementById("interestPrinciple").innerHTML = principle;
        document.getElementById("interestRate").innerHTML = rate;
    }
</script>

Answer 1

From what I can see, nothing about your iteration over the years is calling the problem solving functions. Your variables are declared once with the data available as is, and you're literally looping over the same data years amount of times.

Try something like this.

var tables, principle, years, rate, add_extra, times_compunded_per_tear, compound_rate, i;

principle = 10000;
years = 6;
rate = 5.6;
tables = '';
times_compounded_per_year = 12
compound_rate = 1 / times_compounded_per_year;

function simple_interest(currentYear) {

    return principle * (rate / 100) * currentYear + principle;

}

function compound_interest(currentYear) {
   
    return principle * (Math.pow(((1 + rate/100) / compound_rate), (compound_rate * currentYear)));

}

for (i = 0; i < years + 1; i++) {
  
  tables +=
    "<tr>" +
    "<td>Year: "+ i +"</td>" +
    "<td>Simple Interest "+ simple_interest(i).toFixed(2) + "</td>" +
    "<td>Compound Interest "+ compound_interest(i).toFixed(2) + "</td>" +
    "</tr>";
}
        document.getElementById("tableResult").innerHTML = '<table>' + tables + '</table>';

        document.getElementById("interestPrinciple").innerHTML = "Principle: "+principle;
        document.getElementById("interestRate").innerHTML = "Interest Rate: "+rate;
        //document.getElementById("gradeOutput").innerHTML = years;

<ul>
    <li id="interestPrinciple"></li>
    <li id="interestRate"></li>
</ul>
<div id="tableResult"></div>

Answer 2

You need to calculate the interest inside of the for loop otherwise you are just recycling the same variable each time and never updating it.

for (var i = 0; i < years; i++) {
    var simple_interest = principle * (rate / 100) * i;
    var compound_interest = principle * (1 + rate/100);
        tables +=
            "<tr>" +
            "<td>" + (i + 1) + "</td>" +
            "<td>" + simple_interest + "</td>" +
            "<td>" + compound_interest + "</td>"+
            "</tr>";
    }

Also the compound_interest will need to use the index as well.

Answer 3

Doing the same thing again and again will always give you the same results. In order for the results to change you need to use the index somewhere in your code.

Also why all the comments, clean your code, ask a precise question and you will get a precise answer.