js - wie man Werte aus der Funktion in HTML-Tabelle

Question

Ich habe einen Rechner erstellt, um Rückzahlungen über die Laufzeit des Darlehens zu zeigen.

Ich habe es geschafft, jeden Monat Zahlung, Zinsen, Restdarlehen zu berechnen, aber ich versuche, dies in eine Tabelle auszugeben. Die Spalten sind eine feste Zahl (5), aber die Zeilen sollten basierend auf der Anzahl der Monate dynamisch aktualisiert werden.

Ich habe ein paar ähnliche Beiträge gesehen, kann sie aber nicht für meinen Code verwenden.

-Code unten und in jsfiddle

HTML

<div class="mortgageInput"> 
    <form method="POST" name="calc" onclick="validateForm();repayment();return false;"> 
    <label>Amount </label> 
    <input type="textbox" id="loan" value="100000"><br> 
    <label>Years</label> 
    <input type="textbox" id="years" value="15"><br> 
    <label>Rate (%)</label> 
    <input type="textbox" id="rate" value="6.00" onkeyup="calculate"><br> 
    <input type="button" value="Calculate" id="btn"><br> 
    <label>Monthly Repayment</label> 
    <input type="textbox" id="monthlyRepayment"><br> 
    <label>Monthly Interest Only</label> 
    <input type="textbox" id="interest"><br> 
    <label>Monthly Capital Repayment</label> 
    <input type="textbox" id="capitalRepayment"><br> 
    <label>Total Interest</label> 
    <input type="textbox" id="totalInterest"> 
    </form> 
</div> 
<br> 
    Output into table...<p id="demo"></p> 

JS

(document).on("keyup", calculate()); 

function validateForm(){ 
    var validation = true; 
    validation &= calculate(); 
    validation &= pmt(); 
    return validation; 
} 

function calculate() { 
    var p = document.querySelector("#loan").value; 
    var y = document.querySelector("#years").value; 
    var rate = document.querySelector("#rate").value; 
    var r = rate/100/12; 
    var n = y * 12; 

    var I = (p * r); 
    var monthlyPayment = -pmt(r,n,p); 
    var mr = (monthlyPayment - I); 
    var ti = (monthlyPayment) * n - p; 
    var list = JSON.stringify((computeSchedule(p, rate, 12, y, monthlyPayment)), 0, 4); 

    document.querySelector("#interest").value = I.toFixed(2); 
    document.querySelector("#totalInterest").value = ti.toFixed(2); 
    document.querySelector("#capitalRepayment").value = mr.toFixed(2); 
    document.querySelector("#monthlyRepayment").value = monthlyPayment.toFixed(2); 
    document.getElementById("demo").innerHTML = list; 
} 

function pmt(rate,nper,pv) { 
    var pvif, pmt; 

    pvif = Math.pow(1 + rate, nper); 
    pmt = rate/(pvif - 1) * -(pv * pvif); 

    return pmt; 
} 

function computeSchedule(loan_amount, interest_rate, payments_per_year,  years, payment) { 
    var schedule = []; 
    var remaining = loan_amount; 
    var number_of_payments = payments_per_year * years; 

    for (var i=0; i<=number_of_payments; i++) { 
     var interest = remaining * (interest_rate/100/payments_per_year); 
     var principle = (payment-interest); 
     var row = [i, payment, interest>0?interest:0, principle>0?principle:0, remaining>0?remaining:0]; 
     schedule.push(row); 
     remaining -= principle 
    } 

    return schedule; 
} 

Answer 1

die obige Antwort richtig ist, aber wenn Bedenken hinsichtlich Performance Insert tun html äußere Schleife

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>'; 

Answer 2

Ich bin nicht sicher, ob ich Sie richtig verstanden habe, aber dies sollte in der Regel die Lösung sein. Deine Geige hat einige js Fehler gedruckt, ich habe sie in diesem Beispiel nicht behoben.

function validateForm(){ 
 
    var validation = true; 
 
    validation &= calculate(); 
 
    validation &= pmt(); 
 
    return validation; 
 
} 
 

 
function calculate() { 
 
    var p = document.querySelector("#loan").value; 
 
    var y = document.querySelector("#years").value; 
 
    var rate = document.querySelector("#rate").value; 
 
    var r = rate/100/12; 
 
    var n = y * 12; 
 

 
    var I = (p * r); 
 
    var monthlyPayment = -pmt(r,n,p); 
 
    var mr = (monthlyPayment - I); 
 
    var ti = (monthlyPayment) * n - p; 
 
    var list = JSON.stringify((computeSchedule(p, rate, 12, y, monthlyPayment)), 0, 4); 
 

 
    document.querySelector("#interest").value = I.toFixed(2); 
 
    document.querySelector("#totalInterest").value = ti.toFixed(2); 
 
    document.querySelector("#capitalRepayment").value = mr.toFixed(2); 
 
    document.querySelector("#monthlyRepayment").value = monthlyPayment.toFixed(2); 
 
    
 
    var list = computeSchedule(p, rate, 12, y, monthlyPayment); 
 
    console.log(list.length); 
 
    for (var i=0; i < list.length; i++) { 
 
    \t document.getElementById("test").innerHTML += "<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>"; 
 
    } 
 
} 
 

 
function pmt(rate,nper,pv) { 
 
    var pvif, pmt; 
 

 
    pvif = Math.pow(1 + rate, nper); 
 
    pmt = rate/(pvif - 1) * -(pv * pvif); 
 

 
    return pmt; 
 
} 
 

 
function computeSchedule(loan_amount, interest_rate, payments_per_year, years, payment) { 
 
    var schedule = []; 
 
    var remaining = loan_amount; 
 
    var number_of_payments = payments_per_year * years; 
 

 
    for (var i=0; i<=number_of_payments; i++) { 
 
     var interest = remaining * (interest_rate/100/payments_per_year); 
 
     var principle = (payment-interest); 
 
     var row = [i, payment, interest>0?interest:0, principle>0?principle:0, remaining>0?remaining:0]; 
 
     schedule.push(row); 
 
     remaining -= principle 
 
    } 
 

 
    return schedule; 
 
}

table { 
 
    border-spacing: 0; 
 
} 
 

 
table td { 
 
    border: 1px solid #666; 
 
    padding: 0 3px; 
 
}

<div class="mortgageInput"> 
 
<form method="POST" name="calc" onclick="validateForm();repayment();return false;"> 
 
    <label>Amount </label> 
 
    <input type="textbox" id="loan" value="100000"><br> 
 
    <label>Years</label> 
 
    <input type="textbox" id="years" value="15"><br> 
 
    <label>Rate (%)</label> 
 
    <input type="textbox" id="rate" value="6.00" onkeyup="calculate"><br> 
 
    <input type="button" value="Calculate" id="btn"><br> 
 
    <label>Monthly Repayment</label> 
 
    <input type="textbox" id="monthlyRepayment"><br> 
 
    <label>Monthly Interest Only</label> 
 
    <input type="textbox" id="interest"><br> 
 
    <label>Monthly Capital Repayment</label> 
 
    <input type="textbox" id="capitalRepayment"><br> 
 
    <label>Total Interest</label> 
 
    <input type="textbox" id="totalInterest"> 
 
    </form> 
 
</div> 
 
<br> 
 
<table id="test"> 
 

 
</table>

Answer 3

Das Ergebnis computeSchedule eine dimensionales Array zwei enthält. Sie sollten in der Lage sein, es mit zwei verschachtelten für Schleifen zu durchlaufen. Dann können Sie Ihren Tisch zusammenstellen.

Sehr einfaches Beispiel würde wie folgt aussehen:

var demoList = computeSchedule(p, rate, 12, y, monthlyPayment); 

var table = "<table>"; 

for (var rowIndex=0; rowIndex <= n; rowIndex++) { 
    var row = "<tr><td>#" + rowIndex + "</td>"; 
    for(var colIndex = 0; colIndex < 4; colIndex++) { 
     row += "<td>" + demoList[rowIndex][colIndex] + "</td>"; 
    } 
    table += row + "</tr>"; 
} 
document.getElementById("output").innerHTML = table + "</table>"; 

Sie können auch das Leben Version versuchen hier: https://fiddle.jshell.net/aua4g8e7/