我正在做一些计算。通过用户输入,应该进行计算并用数据构建表。
我的第一个数组calcTable
可以正常工作,但是每一行代表一个月。在我的决赛桌中,我希望一行代表一年。
因此,我目前正在尝试填充一个新数组calcTableShow
,该数组将保存此数据。我在填充calcTableShow
的循环中遇到逻辑问题。可以在此图中看到逻辑:https://i.imgur.com/6qr03f9.png
颜色显示了我在两个表(数组)之间所需的逻辑。
计算calcTableShow
数组中的付款和利息列的另一种方法可能是:
付款示例:
CalcTableShow.payment(p1)= CalcTable.totPayment(p12)-CalcTable.totPayment(p0)
CalcTableShow.payment(p2)= CalcTable.totPayment(p24)-CalcTable.totPayment(p12)
更多...迭代次数
兴趣栏的逻辑相同。
请查看我的代码。可以在javascript代码的底部找到带有年度期限的新代码,该代码当前位于注释中。
我目前的主要问题是如何以正确的方式填充新数组。
另外,在SO处键入内容时,我在想,也许有一个解决方案只有一个循环,它只会创建一个数组(/表)?也许这是一个更好的选择?
我希望这有道理,在此先感谢,
-弗兰克
calculate();
//*********************************************
//************ LINK the INPUTS ****************
//*********************************************
// Select all inputs and add event listener "change" (for calc only).
var inputsArray = document.querySelectorAll("input");
inputsArray.forEach(el => el.addEventListener("change", calculate));
//inputsArray.forEach(el => el.addEventListener("input", linkValue));
//"input"... will cause massive lag with high "t" values...
// Select all inputs and add event listener "input" (for linking values only)
var inputsArrayTwo = document.querySelectorAll("input");
inputsArray.forEach(el => el.addEventListener("input", linkValue));
// Link the range with number inputs
function linkValue(e) {
var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
sibling.value = e.target.value;
}
//*********************************************
//************ UPDATE TABLE OBJECT ************
//*********************************************
function calculate() {
//*********************************************
//************ VARS and CALCS *****************
//*********************************************
let P = parseFloat(document.querySelector("#calc_P").value);//principal
let r = document.querySelector("#calc_r").value / 100;//interest
let n = 12;//compounds
let t = parseFloat(document.querySelector("#calc_t").value);//time in years
let A = parseFloat(document.querySelector("#calc_A").value);//deposits
let p = 12;//periods per year (months)
let nper = p * t;//total number of periods
let rate = (1 + r / n) ** (n / p) - 1;// calculation rate
let F = P * (1 + rate) ** nper + (A * ((1 + rate) ** nper - 1)) / rate;//final value
//test-array
let calcTable = [];
calcTable.push({
period: 0,
payment: 0,
totPayment: P,
interest: 0,
totInterest: 0,
balance: P
});
for (let i = 1; i < nper + 1; i++) {
let previous = i - 1;
let interest = calcTable[previous].balance * rate;
calcTable[i] = {
period: i,
payment: A,
totPayment: (P += A),
interest,
totInterest: interest + calcTable[previous].totInterest,
balance: calcTable[previous].balance + A + interest
};
}
/* THESE FUNCTIONS SHOULD LATER APPLY TO THE NEW ARRAY WITH YEARLY PERIODS
function setPrecision(table) {
for (let i = 0; i < table.length; i++) {
for (let key in table[i]) {
if (key === "interest" || key === "totInterest" || key === "balance") {
table[i][key] = table[i][key].toFixed(0);
}
}
}
}
setPrecision(calcTable);
function localeSet(table) {
for (let i = 0; i < table.length; i++) {
for (let key in table[i]) {
if (key === "interest" || key === "totInterest" || key === "balance") {
table[i][key] = new Intl.NumberFormat("fr", {
minimumFractionDigits: 0
}).format(table[i][key]);
} else {
table[i][key] = new Intl.NumberFormat("fr").format(table[i][key]);
}
}
}
}
localeSet(calcTable);
*/
//*********************************************
//************* CREATE HTML TABLE *************
//*********************************************
var tableSelector = "TblCalc";
//call the jsonToTable Function
jsonToTable(calcTable, tableSelector);
function addEl(parent, nodeName, className) {
var element = document.createElement(nodeName);
if (className) element.className = className;
if (parent) parent.appendChild(element);
return element;
}
function addText(parent, text) {
parent.appendChild(document.createTextNode(text));
}
function jsonToTable(json, selector) {
var table = addEl(null, "table", "tbl-container");
var tbody = addEl(table, "tbody");
var thr = addEl(tbody, "tr", "tbl-headers");
//loop through the property names of the first object
for (var propertyName in json[0]) {
addText(addEl(thr, "th"), propertyName);
}
//loop through the array of objects
for (var ind = 0; ind < json.length; ind++) {
var item = json[ind];
var tr = addEl(tbody, "tr", "tbl-rows");
//loop though each of the objects properties
var first = ind != json.length - 1; // no first item for last row
for (var key in item) {
var el = addEl(tr, "td");
if (first) {
// <---- point of interest
el = addEl(el, "div", "tbl-name-container ");
el = addEl(el, "div", "tbl-name-text");
first = false;
}
//append the table data containing the objects property value
addText(el, "" + item[key]);
}
}
var target = document.getElementById(selector);
target.innerHTML = "";
target.appendChild(table);
}
//*********************************************
//******************** INIT *******************
//*********************************************
document.getElementById("finalValue").innerHTML = F.toFixed(0);
document.getElementById("finalValueTwo").innerHTML = calcTable[nper].balance;
document.getElementById("finalTotalPayments").innerHTML =
calcTable[nper].totPayment;
document.getElementById("finalTotalInterest").innerHTML =
calcTable[nper].totInterest;
//
//
//
// NEW ARRAY WITH YEARLY PERIODS
//
//
/*
let calcTableShow = [];
calcTableShow.push({
period: 0,
payment: 0,
totPayment: calcTable[0].totPayment,
interest: 0,
totInterest: 0,
balance: calcTable[0].totPayment
});
for (let i = 1; i < nper / 12 + 1; i++) {
calcTableShow[i] = {
period: i,
payment: calcTable[i + i * 12].totPayment,
totPayment: calcTable[i + i * 12].payment,
interest: for (let i = 1; i < 13; i++) {calcTable[i].interest},
totInterest: calcTable[i + i * 12].totInterest,
balance: calcTable[i + i * 12].balance
};
}
console.log(calcTableShow);
*/
//
//
//
}
<div class="finalValue">Final Value v.1: <span id="finalValue">0</span></div>
<div class="finalValue">Final Value v.2: <span id="finalValueTwo">0</span></div>
<div class="finalValue">Final Total Payments: <span id="finalTotalPayments">0</span></div>
<div class="finalValue">Final Total Interest: <span id="finalTotalInterest">0</span></div>
<!-- INPUTS -->
<div>
P: <input id="calc_P" type="number" value="1000">
<input type="range" value="1000" step="100" max="10000"><br>
</div>
<div>
A: <input id="calc_A" type="number" value="10">
<input type="range" value="10" step="10" max="500"><br>
</div>
<div>
t: <input id="calc_t" type="number" max="50" value="2">
<input type="range" value="2" max="50"><br>
</div>
<div>
r: <input id="calc_r" type="number" value="10">
<input type="range" value="10" step=".1" max="25"><br>
</div>
<!-- TABLE -->
<div id="TblCalc" class="card table-card"></div>
<!-- JS -->
<script type="text/javascript" src="test.js"></script>
编辑:
在托马斯·路德维希提供答案之后,我不太了解他的逻辑。我试图使它工作几个小时,但我做不到。现在,我使用if (i % 12 == 0)
尝试用年度结果填充新数组。
但是,我遇到了一些很难解决的问题。
以下代码:
calculate();
//*********************************************
//************ LINK the INPUTS ****************
//*********************************************
// Select all inputs and add event listener "change" (for calc only).
var inputsArray = document.querySelectorAll("input");
inputsArray.forEach(el => el.addEventListener("change", calculate));
//inputsArray.forEach(el => el.addEventListener("input", linkValue));
//"input"... will cause massive lag with high "t" values...
// Select all inputs and add event listener "input" (for linking values only)
var inputsArrayTwo = document.querySelectorAll("input");
inputsArray.forEach(el => el.addEventListener("input", linkValue));
// Link the range with number inputs
function linkValue(e) {
var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
sibling.value = e.target.value;
}
//*********************************************
//************ UPDATE TABLE OBJECT ************
//*********************************************
function calculate() {
//*********************************************
//************ VARS and CALCS *****************
//*********************************************
let P = parseFloat(document.querySelector("#calc_P").value); // Starting value
let r = document.querySelector("#calc_r").value / 100; // Interest
let n = 12; // Compounds per year
let t = parseFloat(document.querySelector("#calc_t").value); // Time in years
let A = parseFloat(document.querySelector("#calc_A").value); // Deposits per period
let p = 12; // Deposit periods yearly (monthly)
let nper = p * t; // total # periods
let rate = (1 + r / n) ** (n / p) - 1; // interest rate
let F = P * (1 + rate) ** nper + (A * ((1 + rate) ** nper - 1)) / rate; // Final value
//
/* OLD CODE
//
// new array
let calcTable = [];
// push first row [0]
calcTable.push({
period: 0,
payment: 0,
totPayment: P,
interest: 0,
totInterest: 0,
balance: P
});
// add rest of rows, starting at [1]
for (let i = 1; i < nper + 1; i++) {
let previous = i - 1;
let interest = calcTable[previous].balance * rate;
calcTable[i] = {
period: i,
payment: A,
totPayment: (P += A),
interest,
totInterest: interest + calcTable[previous].totInterest,
balance: calcTable[previous].balance + A + interest
};
}
*/
//
// NEW CODE
//
let calcTableNew = [];
calcTableNew.push({
period: 0,
payment: 0,
totPayment: P,
interest: 0,
totInterest: 0,
balance: P
});
for (let i = 1; i < nper / 12 + 1; i++) {
let calcTableInsideLoop = [];
for (let i = 1; i < nper + 1; i++) {
let previous = i - 1;
let interest = calcTableInsideLoop[previous].balance * rate;
calcTableInsideLoop[i] = {
period: i,
payment: A,
totPayment: (P += A),
interest,
totInterest: interest + calcTableInsideLoop[previous].totInterest,
balance: calcTableInsideLoop[previous].balance + A + interest
};
if (i % 12 == 0) {
addDataToYearlyArray();
}
}
function addDataToYearlyArray() {
calcTableNew[i] = {
period: i,
payment:
calcTableInsideLoop[i * 12].totPayment -
calcTableInsideLoop[i * 12 - 12].totPayment,
totPayment: calcTableInsideLoop[i * 12].totPayment,
interest:
calcTableInsideLoop[i * 12].totInterest -
calcTableInsideLoop[i * 12 - 12].totInterest,
totInterest: calcTableInsideLoop[i * 12].totInterest,
balance: calcTableInsideLoop[i * 12].balance
};
}
}
console.log(calcTableNew);
//
/* THESE FUNCTIONS ARE TEMPORARLY COMMENTED OUT, SHOULD APPLY TO THE NEW ARRAY WITH YEARLY PERIODS
//
function setPrecision(table) {
for (let i = 0; i < table.length; i++) {
for (let key in table[i]) {
if (key === "interest" || key === "totInterest" || key === "balance") {
table[i][key] = table[i][key].toFixed(0);
}
}
}
}
setPrecision(calcTable);
function localeSet(table) {
for (let i = 0; i < table.length; i++) {
for (let key in table[i]) {
if (key === "interest" || key === "totInterest" || key === "balance") {
table[i][key] = new Intl.NumberFormat("fr", {
minimumFractionDigits: 0
}).format(table[i][key]);
} else {
table[i][key] = new Intl.NumberFormat("fr").format(table[i][key]);
}
}
}
}
localeSet(calcTable);
*/
//*********************************************
//************* CREATE HTML TABLE *************
//*********************************************
var tableSelector = "TblCalc";
//call the jsonToTable Function
jsonToTable(calcTable, tableSelector);
function addEl(parent, nodeName, className) {
var element = document.createElement(nodeName);
if (className) element.className = className;
if (parent) parent.appendChild(element);
return element;
}
function addText(parent, text) {
parent.appendChild(document.createTextNode(text));
}
function jsonToTable(json, selector) {
var table = addEl(null, "table", "tbl-container");
var tbody = addEl(table, "tbody");
var thr = addEl(tbody, "tr", "tbl-headers");
//loop through the property names of the first object
for (var propertyName in json[0]) {
addText(addEl(thr, "th"), propertyName);
}
//loop through the array of objects
for (var ind = 0; ind < json.length; ind++) {
var item = json[ind];
var tr = addEl(tbody, "tr", "tbl-rows");
//loop though each of the objects properties
var first = ind != json.length - 1; // no first item for last row
for (var key in item) {
var el = addEl(tr, "td");
if (first) {
// <---- point of interest
el = addEl(el, "div", "tbl-name-container ");
el = addEl(el, "div", "tbl-name-text");
first = false;
}
//append the table data containing the objects property value
addText(el, "" + item[key]);
}
}
var target = document.getElementById(selector);
target.innerHTML = "";
target.appendChild(table);
}
//*********************************************
//******************** INIT *******************
//*********************************************
document.getElementById("finalValue").innerHTML = F.toFixed(0);
document.getElementById("finalValueTwo").innerHTML = calcTable[nper].balance;
document.getElementById("finalTotalPayments").innerHTML =
calcTable[nper].totPayment;
document.getElementById("finalTotalInterest").innerHTML =
calcTable[nper].totInterest;
}
<div class="finalValue">Final Value v.1: <span id="finalValue">0</span></div>
<div class="finalValue">Final Value v.2: <span id="finalValueTwo">0</span></div>
<div class="finalValue">Final Total Payments: <span id="finalTotalPayments">0</span></div>
<div class="finalValue">Final Total Interest: <span id="finalTotalInterest">0</span></div>
<!-- INPUTS -->
<div>
P: <input id="calc_P" type="number" value="1000">
<input type="range" value="1000" step="100" max="10000"><br>
</div>
<div>
A: <input id="calc_A" type="number" value="10">
<input type="range" value="10" step="10" max="500"><br>
</div>
<div>
t: <input id="calc_t" type="number" max="50" value="2">
<input type="range" value="2" max="50"><br>
</div>
<div>
r: <input id="calc_r" type="number" value="10">
<input type="range" value="10" step=".1" max="25"><br>
</div>
<!-- TABLE -->
<div id="TblCalc" class="card table-card"></div>
<!-- JS -->
<script type="text/javascript" src="test2.js"></script>
我希望有人可以在这里向正确的方向提供帮助。 -弗兰克
编辑2-已解决
我找到了一种解决年度阵列/表问题的方法。这段代码仍然有些混乱。但是现在它正在按预期工作。
//*********************************************
//************ LINK the INPUTS ****************
//*********************************************
//debugger - delete me
var inputsArrayDebug = document.querySelectorAll("input");
inputsArrayDebug.forEach(el => el.addEventListener("change", debug));
// Select all inputs and add event listener "input" (for linking values only)
var inputsArray = document.querySelectorAll("input");
inputsArray.forEach(el => el.addEventListener("input", linkValue));
// Link the range with number inputs
function linkValue(e) {
var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
sibling.value = e.target.value;
parametersCalculationGet();
tablesInit(para.P);
monthlyTableCalculate();
annualTableCalculate();
}
//*********************************************
//************ CALCULATIONS *******************
//*********************************************
// set up new empty arrays
var monthlyTable;
var annualTable;
// create month and annual table array element
// and push the first row [0]
function tablesInit(P) {
monthlyTable = [];
annualTable = [];
var obj = {};
obj.period = 0;
obj.payment = 0;
obj.totPayment = P;
obj.interest = 0;
obj.totInterest = 0;
obj.balance = P;
monthlyTable.push(obj);
annualTable.push(obj);
}
function monthlyTableAddNewMonth() {
var obj = {};
var previous = monthlyTable.length - 1;
var interest = monthlyTable[previous].balance * para.rate;
// add monthly input datas to month table;
obj.period = monthlyTable.length;
obj.payment = para.A;
obj.totPayment = para.P += para.A;
obj.interest = interest;
obj.totInterest = interest + monthlyTable[previous].totInterest;
obj.balance = monthlyTable[previous].balance + para.A + interest;
monthlyTable.push(obj);
}
function annualTableAddNewYear() {
var obj = {};
var currentAnTable = annualTable.length;
var previous = monthlyTable.length - 1;
// add monthly input datas to month table;
obj.period = currentAnTable;
obj.payment =
monthlyTable[currentAnTable * 12].totPayment -
monthlyTable[currentAnTable * 12 - 12].totPayment;
obj.totPayment = monthlyTable[currentAnTable * 12].totPayment;
obj.interest =
monthlyTable[currentAnTable * 12].totInterest -
monthlyTable[currentAnTable * 12 - 12].totInterest;
obj.totInterest = monthlyTable[currentAnTable * 12].totInterest;
obj.balance = monthlyTable[currentAnTable * 12].balance;
annualTable.push(obj);
}
function parametersCalculationGet() {
//******************************* FIRES VID INPUT
// get calculation parameters and store in object
para = {};
para.P = parseFloat(document.querySelector("#calc_P").value); // Starting value
para.r = document.querySelector("#calc_r").value / 100; // Annual interest
para.n = 12; // Compounds per year
para.t = parseFloat(document.querySelector("#calc_t").value); // Time in years
para.A = parseFloat(document.querySelector("#calc_A").value); // Deposits per period
para.p = 12; // Deposit periods per year
para.nper = para.p * para.t; // total number of periods
para.rate = (1 + para.r / para.n) ** (para.n / para.p) - 1; // calculated interest rate
para.F =
para.P * (1 + para.rate) ** para.nper +
(para.A * ((1 + para.rate) ** para.nper - 1)) / para.rate; // Final value
return para;
}
// update monthly payments and interests
function monthlyTableCalculate() {
// i assume taht hete some parameters for the calculation will be obtained from somewhere
var para = parametersCalculationGet();
for (i = 0; i < para.nper; i++) {
monthlyTableAddNewMonth();
}
}
function annualTableCalculate() {
var para = parametersCalculationGet();
// if (i % 12 == 0) { } nice trick but now not needed anymore
for (i = 0; i < para.t; i++) {
annualTableAddNewYear();
}
}
// Init
// Get parameters
parametersCalculationGet();
// Push first row [0] to monthlyTable and annualTable
tablesInit(para.P);
// Calculate and push rest of rows to monthlyTable
monthlyTableCalculate();
annualTableCalculate();
function debug() {
console.log("monthlyTable");
console.log(monthlyTable);
console.log("annualTable");
console.log(annualTable);
}
console.log("monthlyTable");
console.log(monthlyTable);
console.log("annualTable");
console.log(annualTable);
<div class="finalValue">Final Value v.1: <span id="finalValue">0</span></div>
<div class="finalValue">Final Value v.2: <span id="finalValueTwo">0</span></div>
<div class="finalValue">Final Total Payments: <span id="finalTotalPayments">0</span></div>
<div class="finalValue">Final Total Interest: <span id="finalTotalInterest">0</span></div>
<!-- INPUTS -->
<div>
P: <input id="calc_P" type="number" value="1000">
<input type="range" value="1000" step="100" max="10000"><br>
</div>
<div>
A: <input id="calc_A" type="number" value="10">
<input type="range" value="10" step="10" max="500"><br>
</div>
<div>
t: <input id="calc_t" type="number" max="50" value="2">
<input type="range" value="2" max="50"><br>
</div>
<div>
r: <input id="calc_r" type="number" value="10">
<input type="range" value="10" step=".1" max="25"><br>
</div>
<!-- TABLE -->
<div id="TblCalc" class="card table-card"></div>
<!-- JS -->
<script type="text/javascript" src="test3.js"></script>
答案 0 :(得分:1)
感叹好的,好的,您是js的新手,我不会让您spaghettyfie您的第一个程序... 如您所见,简单的事情可以简单地完成:)请检查以下公式-否则您的船,别墅和妻子将不见了;)
var monthlyTable ;
var annualTable ;
// set up new empty array
// vreate new array element
function monthlyTableInit(P) {
monthlyTable=[];
var obj = {};
obj.period = 0;
obj.payment = 0;
obj.totPayment = P;
obj.interest = 0;
obj.totInterest = 0;
obj.balance = P;
};
function monthlyTableAddNewMonth(payment, totPayment, interest, toInterest, balance) {
var obj = {}
// add monthly input datas to month table;
obj.period = monthlyTable.lenght;
obj.payment = 0;
obj.totPayment = P;
obj.interest = 0;
obj.totInterest = 0;
obj.balance = P;
monthlyTable.push(obj)
};
function parametersCalculationGet() {
//get calculation parameters and store in object
para = {};
para.P = parseFloat(document.querySelector("#calc_P").value); // Starting value
para.r = document.querySelector("#calc_r").value / 100; // Interest
para.n = 12; // Compounds per year
para.t = parseFloat(document.querySelector("#calc_t").value); // Time in years
para.A = parseFloat(document.querySelector("#calc_A").value); // Deposits per period
para.p = 12; // Deposit periods yearly (monthly)
para.nper = p * t; // total # periods
para.rate = (1 + r / n) ** (n / p) - 1; // interest rate
para.F = P * (1 + rate) ** nper + (A * ((1 + rate) ** nper - 1)) / rate; // Final value
return para
}
//update montlys payments and interests
function monthlyTableCalculate {
// i asume taht hete some parameters for the calculation will be obtained from somewhere
var para = parametersCalculationGet();
for(i = 0; i<monthlyTable.length; i++) {
let previous = i - 1;
// this matheematics will be buggy i do not know your algorithm
var obj = {};
obj.period = i;
obj.payment = 0;
obj.interest = 0;
obj.totInterest = 0;
obj.totPayment = P;
obj.balance = P;
obj.interest = calcTableInsideLoop[previous].balance * para.rate;
obj.totInterest = interest + calcTableInsideLoop[previous].totInterest;
obj.payment = para.A;
obj.totPayment = (obj.P += para.A);
obj.interest = 0; // ?
obj.totInterest = obj.interest + monthlyTable[previous].totInterest;
obj.balance: monthlyTable[previous].balance + obj.A + obj.interest;
}
}
function anualTableCreate(startMonth) {
var annualTable =[];
// if (i % 12 == 0) { } nice trick but now not needed anymopre
for(i = startMonth; i<monthlyTable.length; i = i + 12) {// ad start as a offset
annualTable.push(monthlyTable[i]);
}
}
function runCalculation() {
monthlyTableInit(P);
console.log("monthlyTable");
console.log(monthlyTable);
anualTableCreate(0);
console.log("annualTable");
console.log(annualTable);
}