Q&A
「資産」と「負債」の計算式は何ですか。
やりたいこと
入力欄に「金額」「年数」「利率」を入力してボタンを押すと、計算結果がテーブルに表示されるようなアプリがあります。
入力した年数分、テーブルに行と結果が自動で追加されるようにするにはどうすればよいでしょうか。
イメージ
イメージとしては下記のサイトのように、年数分のテーブル行が自動生成され、計算結果がテーブルに表示されるのが理想です。
https://keisan.casio.jp/exec/system/1428900897
コード
html
1 <div class="input"> 2 <label class="form-label">金額</label> 3 <input id = "asset-retirement-cost" type="cost" class="form-control" placeholder="JPY'000"> 4 <label class="form-label">年数</label> 5 <input id = "year-of-use" type="cost" class="form-control" placeholder="例）5"> 6 <label class="form-label">利率（％）</label> 7 <input id = "interest" type="cost" class="form-control" placeholder="例）1"> 8 <button type="button" id="button">計算</button> 9 <label class="form-label">結果</label> 10 <h3><u class="present-value" id="present-value"></u></h3> 11 </div> 12 13<!-- 年間推移 --> 14 <div class="table" id="table"> 15 <table id="table-style"> 16 <th>年</th> 17 <th>資産</th> 18 <th>負債</th> 19 <tr> 20 <td>1年</td> 21 <td class="assets"></td> 22 <td class="debit"></td> 23 </tr> 24 <tr> 25 <td>2年</td> 26 <td class="assets"></td> 27 <td class="debit"></td> 28 </tr> 29 <tr> 30 <td>3年</td> 31 <td class="assets"></td> 32 <td class="debit"></td> 33 </tr> 34 <tr> 35 <td>4年</td> 36 <td class="assets"></td> 37 <td class="debit"></td> 38 </tr> 39 <tr> 40 <td>5年</td> 41 <td class="assets"></td> 42 <td class="debit"></td> 43 </tr> 44 </table> 45 </div>
javascript
1window.addEventListener('load', function(){ 2 const cost = document.getElementById("asset-retirement-cost"); 3 const year = document.getElementById("year-of-use"); 4 const interest = document.getElementById("interest"); 5 const button = document.getElementById("button"); 6 const presentValue = document.getElementById("present-value"); 7 const assets = document.getElementsByClassName("assets"); 8 const debit = document.getElementsByClassName("debit"); 9 10 button.addEventListener('click', function() { 11 const inputCost = cost.value; 12 const inputYear = year.value; 13 const inputInterest = parseFloat(interest.value); 14 const num = parseFloat(1); 15 const year1 = parseFloat(0.2); 16 17 const result = Math.floor(inputCost/((inputInterest + num)**inputYear)); 18 presentValue.innerHTML = result.toLocaleString(); 19 const assetsLength = assets.length; 20 let assetsIndex = 0; 21 while (assetsIndex < assetsLength) { 22 assets[assetsIndex].innerHTML = Math.floor(result * year1).toLocaleString(); 23 assetsIndex++; 24 } 25 26 const debitLength = debit.length; 27 let debitIndex = 0; 28 let resultDebit = Math.ceil(result + parseFloat(result)*0.01); 29 while (debitIndex < debitLength) { 30 debit[debitIndex].innerHTML = resultDebit.toLocaleString(); 31 debitIndex++; 32 resultDebit += Math.ceil(parseFloat(resultDebit)*0.01); 33 }; 34 }) 35});
調べたこと・試したこと
javascript
1 var table = document.getElementById("table"); 2 //列を作成 3 td = new Array(3); 4 for(var i = 0; i < assetsLength; i++){ 5 td[i] = document.createElement("td"); 6 } 7 //行を作成 8 tr = new Array(year); 9 for(var j = 0; j < year; j++){ 10 tr[j] = document.createElement("tr"); 11 } 12 for(j = 0; j < year; j++){ 13 for(i = 0; i < 3; i++){ 14 //列を追加 15 tr[j].appendChild(td[i]); 16 } 17 //行を追加 18 table.appendChild(tr[j]); 19 }
このあたりで迷走しています。。。
コードがわかりにくくて申し訳ございません。
回答1件
0
ベストアンサー
変数g に配列を作り、一気に表にするイメージ。
資産と負債の計算式は理解不能でした。
html&js
1<!DOCTYPE html> 2<meta charset="utf-8"> 3<title></title> 4<style> 5#D tbody tr td:first-of-type:after { content: "年"} 6</style> 7 8<body> 9<div id="A"> 10 金額:<input type="number"> 11 年数:<input type="number"> 12 利率（％）:<input type="number"> 13 <button id="B">計算</button><br> 14 結果:<output id="C"></output> 15</div> 16 17<table id="D"> 18 <thead> 19 <tr><th>年<th>資産<th>負債 20</table> 21 22 23<script> 24const ary2tbody=(a,b=document.createElement('tbody'))=>a.reduce((b,a)=>(a.reduce((c,d)=>(c.insertCell().append(d),c),b.insertRow()),b),b); 25 26function E () { 27 const {floor:int , ceil} = Math; 28 let [a, b, c] = Array.from(A.querySelectorAll ('input[type="number"]'),a=> a.valueAsNumber || 0); 29 let r = int (a / ((c + 1) ** b)); 30 let e = 0.2; 31 let f = ceil (r * 0.01); 32 let g = [ ]; 33 34 for (let i = 0; i < b; i++) 35 g.push ([i + 1, int (r * e), ceil(r + f * (i + 1))]); 36 37 [...D.tBodies].forEach (e=> e.remove ()); 38 39 D.appendChild (ary2tbody (g)); 40 C.value = r; 41} 42 43B.addEventListener ('click', E, false); 44 45</script> 46
それでも好くわかりません
あなたが勝手につけた変数名をあれこれ並べられるより
公式のようなものを見せられた方が理解がしやすい。
貴方にではないが、とある質問者にあてつけにショートコーディングして回答し、
うさ晴らしをしていた流れで今回思いつくままに書いてしまった。（そっちは今後無視(?)するけど・・・）
あとは頑張れ！
js
1function E () { 2 const {floor:int , ceil} = Math; 3 let [a, b, c] = Array.from(A.querySelectorAll ('input[type="number"]'),a=> a.valueAsNumber || 0); 4 let r = int (a / ((c + 1) ** b)); 5 let e = int (r * 0.2); 6 let g = [ ]; 7 8 9 for (let i = 0, rd = r; i < b; i++) 10 g.push ([i + 1, e, rd += ceil (rd * 0.01)]); 11 12 [...D.tBodies].forEach (e=> e.remove ()); 13 14 D.appendChild (ary2tbody (g)); 15 C.value = r; 16}
投稿2022/06/24 15:38
編集2022/06/26 11:33
総合スコア616
ご回答いただきあありがとうございます！こんなふうに省略することができるのですね。
計算方法について、わかりやすく説明できず申し訳ございません。
```javascript
const debitLength = debit.length;
let debitIndex = 0;
let resultDebit = Math.ceil(result + parseFloat(result)*0.01);
while (debitIndex < debitLength) {
debit[debitIndex].innerHTML = resultDebit.toLocaleString();
debitIndex++;
resultDebit += Math.ceil(parseFloat(resultDebit)*0.01);
```
この部分では、1年目は「結果」で表示した金額に1％を足し、2年目以降は前年の金額に更に1％（小数点以下切り上げ）を足す、を繰り返しています。
ご提案いただいた下記のコードですと、おそらく「結果」の1%を毎年足していくようになっていると思いましたので、上記のような計算結果になるように変えようしたのですが、当初のコードの
```
resultDebit += Math.ceil(parseFloat(resultDebit)*0.01);
```
この部分で加算代入していたのですが、ご提案いただいたコードではどのように修正すればよいでしょうか。
```javascript
g.push ([i + 1, int (r * e), ceil(r + f * (i + 1))]);
```
恐れ入りますが、ご教授いただけると幸いです。
説明がわかりにくくて申し訳ございません。
ご回答いただきありがとうございました！勉強になりました。
もう少し頑張ってみます！
あなたの回答
tips
プレビュー
