質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

JavaScriptで入力した年数分テーブル行が追加・計算結果が自動入力されるようにしたい

K_Chi
K_Chi

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

1クリップ

302閲覧

投稿2022/06/24 14:03

編集2022/06/26 23:21

やりたいこと

入力欄に「金額」「年数」「利率」を入力してボタンを押すと、計算結果がテーブルに表示されるようなアプリがあります。
入力した年数分、テーブルに行と結果が自動で追加されるようにするにはどうすればよいでしょうか。

イメージ

イメージとしては下記のサイトのように、年数分のテーブル行が自動生成され、計算結果がテーブルに表示されるのが理想です。
https://keisan.casio.jp/exec/system/1428900897

コード

html

<div class="input"> <label class="form-label">金額</label> <input id = "asset-retirement-cost" type="cost" class="form-control" placeholder="JPY'000"> <label class="form-label">年数</label> <input id = "year-of-use" type="cost" class="form-control" placeholder="例)5"> <label class="form-label">利率(%)</label> <input id = "interest" type="cost" class="form-control" placeholder="例)1"> <button type="button" id="button">計算</button> <label class="form-label">結果</label> <h3><u class="present-value" id="present-value"></u></h3> </div> <!-- 年間推移 --> <div class="table" id="table"> <table id="table-style"> <th></th> <th>資産</th> <th>負債</th> <tr> <td>1年</td> <td class="assets"></td> <td class="debit"></td> </tr> <tr> <td>2年</td> <td class="assets"></td> <td class="debit"></td> </tr> <tr> <td>3年</td> <td class="assets"></td> <td class="debit"></td> </tr> <tr> <td>4年</td> <td class="assets"></td> <td class="debit"></td> </tr> <tr> <td>5年</td> <td class="assets"></td> <td class="debit"></td> </tr> </table> </div>

javascript

window.addEventListener('load', function(){ const cost = document.getElementById("asset-retirement-cost"); const year = document.getElementById("year-of-use"); const interest = document.getElementById("interest"); const button = document.getElementById("button"); const presentValue = document.getElementById("present-value"); const assets = document.getElementsByClassName("assets"); const debit = document.getElementsByClassName("debit"); button.addEventListener('click', function() { const inputCost = cost.value; const inputYear = year.value; const inputInterest = parseFloat(interest.value); const num = parseFloat(1); const year1 = parseFloat(0.2); const result = Math.floor(inputCost/((inputInterest + num)**inputYear)); presentValue.innerHTML = result.toLocaleString(); const assetsLength = assets.length; let assetsIndex = 0; while (assetsIndex < assetsLength) { assets[assetsIndex].innerHTML = Math.floor(result * year1).toLocaleString(); assetsIndex++; } 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); }; }) });

調べたこと・試したこと

javascript

var table = document.getElementById("table"); //列を作成 td = new Array(3); for(var i = 0; i < assetsLength; i++){ td[i] = document.createElement("td"); } //行を作成 tr = new Array(year); for(var j = 0; j < year; j++){ tr[j] = document.createElement("tr"); } for(j = 0; j < year; j++){ for(i = 0; i < 3; i++){ //列を追加 tr[j].appendChild(td[i]); } //行を追加 table.appendChild(tr[j]); }

このあたりで迷走しています。。。
コードがわかりにくくて申し訳ございません。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

think49

2022/06/26 15:25

「資産」と「負債」の計算式は何ですか。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。