JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p><b>Drawdowns and Repayments</b> (Loop)</p><p>
<label for="textfield">Amount:</label>
<input type="text" name="amount" id="amount" value="100000">
<label for="textfield">Rate:</label>
<input type="text" name="rate" id="rate" value="1">
Term: 
<select name="term" id="term">
<option value="1">month 1</option>
<option value="2">month 2</option>
<option value="3">month 3</option>
<option value="4">month 4</option>
<option value="5">month 5</option>
<option value="6">month 6</option>
<option value="7">month 7</option>
<option value="8">month 8</option>
<option value="9">month 9</option>
<option value="10">month 10</option>
<option value="11">month 11</option>
<option value="12" selected>month 12</option>
<option value="13">month 13</option>
<option value="14">month 14</option>
<option value="15">month 15</option>
<option value="16">month 16</option>
<option value="17">month 17</option>
<option value="18">month 18</option>
<option value="19">month 19</option>
<option value="20">month 20</option>
<option value="21">month 21</option>
<option value="22">month 22</option>
<option value="23">month 23</option>
<option value="24">month 24</option>
<option value="96">month 96</option>
</select>
</p>
<p><b>Drawdown</b></p><p>
<p>Draw 1: <select name="add1" id="add1">
<option value="1">month 1</option>
</select>
<label for="textfield">Amount:</label>
<input type="text" name="addamount1" id="addamount1">
</p>

<p>Draw 2: <select name="add2" id="add2">
<option value="select" selected>select</option>
<option value="1">month 1</option>
<option value="2">month 2</option>
<option value="3">month 3</option>
<option value="4">month 4</option>
<option value="5">month 5</option>
<option value="6">month 6</option>
<option value="7">month 7</option>
<option value="8">month 8</option>
<option value="9">month 9</option>
<option value="10">month 10</option>
<option value="11">month 11</option>
<option value="12">month 12</option>
</select>
<label for="textfield">Amount:</label>
<input...

JavaScript

function loop() {

var amount = +document.getElementById('amount').value;
var rate = +document.getElementById('rate').value;
var term = +document.getElementById('term').value;

var add1 = +document.getElementById('add1').value;
var addamount1 = +document.getElementById('addamount1').value;
var add2 = +document.getElementById('add2').value;
var addamount2 = +document.getElementById('addamount2').value;

var minus1 = +document.getElementById('minus1').value;
var minusamount1 = +document.getElementById('minusamount1').value;
var minus2 = +document.getElementById('minus2').value;
var minusamount2 = +document.getElementById('minusamount2').value;

var rollmnth = +document.getElementById('rollmnth').value;

if (addamount1 != "") {amount=addamount1;}


var totint = 0;
var text = "";
var i;
for (i = 1; i < term+1; i++) {

if (add2 == i) {amount=(amount+addamount2);}
if (minus1 == i) {amount=(amount-minusamount1);}
if (minus2 == i) {amount=(amount-minusamount2);}

var prevint = totint;

var calint = (amount/100)*rate;
amount = (calint+amount);
var interest = calint;

totint = (calint+prevint); 

if (rollmnth == 1) {amount = (amount-calint);}

text += "Month " + i + ": £" + amount.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - Interest: £" + interest.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "<br>";
    

}


var text2 = "Total Interest: £" + totint.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

document.getElementById("result").innerHTML = text;

document.getElementById("result2").innerHTML = text2;

}