JavaScriptを使った計算の結果をブラウザに表示させたい

前提・実現したいこと

プログラミング始めたばかりの初心者です。初質問失礼します。
JavaScriptを使って、簡単に複利計算ができるようなものを作っています。
この計算結果をコンソールに表示することはできたのですが、ブラウザの方には望む形で表示できずに困っております。

コンソールと同じように、ブラウザにも

１日目　〜〜〜〜〜円
２日目　〜〜〜〜〜円
３日目　〜〜〜〜〜円
・
・
・
のように表示させたいのですが、おそらく毎回書き換えられており、一番最後しか表示されません。

ソースコード

html

<!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>複利計算</title>
  </head>
  
  <body>
    <main>  
       <div id = "result"></div>
     </main>
     <script src="js/main.js"></script>
  </body>
</html>

  'use strict';{

    let nitiri = 1.01 //日利
    let motode = 100000 //元手
    let span = 10 //期間
    
    let i = 1


    while (i<=span) {
      let text = document.getElementById("result").textContent;
      document.getElementById("result").textContent = (i + "日目　" + Math.round(nitiri*motode).toLocaleString());
      
      console.log(i + "日目　" + Math.round(nitiri*motode).toLocaleString());
      motode *= nitiri;
      i += 1;
    }


  }

試したこと

・while文をfor文に書き換え

自分なりに調べれみたのですが、どのように書けば思っているような形で出力されるかわかりません。初歩的な問題だと思いますが、アドバイスいただければ幸いでございます。

m.ts10806

2019/09/06 05:12

（質問は編集できます）「初心者アイコン」があるのでそちらをお使いください。

行動規範の内容に同意します

回答4件

簡単に書くならこうですね。

js
1
2      document.getElementById("result").innerHTML += (i + "日目　" + Math.round(nitiri*motode).toLocaleString())+"<br />";

+=で追記

brタグを入れるのでinnerHTMLに変更

投稿2019/09/06 05:19

編集2019/09/06 05:22

m.ts10806

総合スコア80875

退会済みユーザー

2019/09/06 06:19

ご回答ありがとうございます！これだけシンプルにかけるんですね。勉強になりました

m.ts10806

2019/09/06 06:23 編集

あくまで「簡単にやるなら」です。リストにしたいならbrタグで折り返させるのではなくul-liで組んだほうが良いでしょうし、そこはレイアウト含めて要件詰めてください。

行動規範の内容に同意します

ベストアンサー

JavaScript
1document.getElementById("result").textContent = (i + "日目　" + Math.round(nitiri*motode).toLocaleString());

でループ毎に設定し直してるのが原因ですね（textを利用してないのが原因ですね)

JavaScript
1    document.getElementById("result").innerHTML = '';
2    while (i<=span) {
3      document.getElementById("result").innerHTML = (
4          document.getElementById("result").innerHTML + '<br />' + 
5          i + "日目　" + Math.round(nitiri*motode).toLocaleString()
6      );
7
8      console.log(i + "日目　" + Math.round(nitiri*motode).toLocaleString());
9      motode *= nitiri;
10      i += 1;
11    }

とりあえずこんな感じでいいのかなと

投稿2019/09/06 05:16

rururu3

総合スコア5545

退会済みユーザー

2019/09/06 06:19

ご回答ありがとうございます！原因もわかりやすく、スッキリしました

行動規範の内容に同意します

javascript
1<script>
2let nitiri = 1.01; //日利
3let motode = 100000; //元手
4let span = 10; //期間
5window.addEventListener('DOMContentLoaded', ()=>{
6  for(var i=1;i<=span;i++){
7    var text = i + "日目　" + Math.round(nitiri*motode).toLocaleString();
8    var div=document.createElement("div");
9    div.textContent= text;
10    document.getElementById("result").appendChild(div);
11    console.log(text);
12    motode *= nitiri;
13  }
14});
15</script>
16<main>  
17<div id = "result"></div>
18</main>
19

投稿2019/09/06 05:21

yambejp

総合スコア116690

退会済みユーザー

2019/09/06 06:20

ご回答ありがとうございます！助かりました

行動規範の内容に同意します

こんな具合でしょうか。

    while (i<=span) {
      let text = document.getElementById("result").textContent;
      // 毎回同じ #result という div セットしてしまっている
      // document.getElementById("result").textContent = (i + "日目　" + Math.round(nitiri*motode).toLocaleString());
        
      var div = document.createElement('div'); // 新しく要素を作る
      div.textContent = i + "日目　" + Math.round(nitiri*motode).toLocaleString(); 
      document.getElementById("result").appendChild(div);　// result に新しく作った要素を追加

      console.log(i + "日目　" + Math.round(nitiri*motode).toLocaleString());
      motode *= nitiri;
      i += 1;
    }

投稿2019/09/06 05:15

編集2019/09/06 06:19