Javascript - 你如何找到一个数字随时间的总增长？

Question

Thanks for stopping by!

I am creating a small program that will display the total compound interest.
For example, let's say every month a person were to get 5% increase on their monthly income. They start off with $1,000, but after a year, they would be making $1,820 per month.

I got it to the point where it will display the monthly income after the 1 year ($1,820), but I can't seem to find a way to get it to display the total increase you made over the 1 year.

Month 1 = +50
Month 2 = +104
Month 3 = +160
Month 4 = +220
Month 5 = +282
Month 6 = +348
Month 7 = +417
Month 8 = +490
Month 9 = +566
Month 10 = +647
Month 11 = +731
Month 12 = +820
________________
Total = $4,835

Normally this would be very easy to do, but since the amount, percentage, and duration are all variables, I am at a loss.

Basically what I am looking to do would be

"Amount: 1000
Percentage: 5
Duration: 12

Total: $1,820
Total Money Gained: $4,835"

Thank you so much for taking the time to help!
Have a fantastic rest of your day!

HTML

<input id="amount" type="number" onchange="myFunction()">
<input id="percentage" type="number" onchange="myFunction()">
<input id="duration" type="number" onchange="myFunction()">
<h2 id="payment"></h2>

JAVASCRIPT

function myFunction() {
    var amount = document.getElementById('amount').value;
    var percentage = document.getElementById('percentage').value;
    var duration = document.getElementById('duration').value;

    var payment = Math.round(amount * (1 + (percentage * 0.01) / duration)**(duration**2));

    document.getElementById('payment').textContent=payment;
}

CodePen Example

Answer 1

You need to loop through each tick in duration , calculate the difference from the base amount, and print it:

 const outputElm = document.getElementById("payment"); const appendP = textContent => { outputElm.appendChild(document.createElement('p')) .textContent = textContent; }; function somethingHere() { outputElm.textContent=""; var base = document.getElementById('amount').value; var percentage = document.getElementById('percentage').value; var duration = document.getElementById('duration').value; const multiplier = 1 + (percentage*0.01); let payment = base; for (let i = 0; i < duration; i++) { payment *= multiplier; appendP(`Month ${i + 1}: +$${Math.round(payment - base)}`); } appendP('----------------'); appendP(`Total: $${Math.round(payment)}`); }

 <p>Amount <input id="amount" type="number" value="0" onchange="somethingHere()"></p> <p>Percentage <input id="percentage" value="5" type="number" onchange="somethingHere()"></p> <p>Duration <input id="duration" type="number" value="12" onchange="somethingHere()"></p> <div id="payment"></div>

Answer 2

To begin with, your compound interest calculation is wrong. Using the variables a (amount), i (increase) and d (duration), the compounded amount would be expressed as:

Then, for the total amount gained over the duration, the sum expression would be:

Which can be rewritten as:

Plugging that into the JavaScript code, you get the following:

 function myFunction() { var a = +document.getElementById('amount').value; var i = +document.getElementById('percentage').value / 100; var d = +document.getElementById('duration').value; var payment = a * ((1 + i) ** d); var total = a / i * (((1 + i) ** d) + i * ((1 + i) ** d - d - 1) - 1); document.getElementById('payment').textContent = payment; document.getElementById('total').textContent = total; }

 <input id="amount" type="number" onchange="myFunction()"> <input id="percentage" type="number" onchange="myFunction()"> <input id="duration" type="number" onchange="myFunction()"> <h2 id="payment"></h2> <h2 id="total"></h2>

Answer 3

use looping to determine the increase every month. After getting the increase, add it to the total number of increase.

 function increase() { var amount = document.getElementById('amount').value; var percentage = document.getElementById('percentage').value; var duration = document.getElementById('duration').value; var total = 0; for (var i = 1; i <= duration; i++) { var payment = Math.round(amount * (1 + (percentage * 0.01) / i) ** (i ** 2)); total += (payment - amount); } document.getElementById('payment').textContent = payment; console.log(total); }

 <p>Amount <input id="amount" type="number" value="0" onchange="increase()"></p> <p>Percentage <input id="percentage" value="5" type="number" onchange="increase()"></p> <p>Duration <input id="duration" type="number" value="12" onchange="increase()"></p> <div id="payment"></div>