88805


下記のconsole.logの出力結果をブラウザ上で表示するにはどうしたらよいのでしょうか？

[code]

    let greeting = "Hello world";
    for (let i = 0; i < 5; i++) {
            console.log(greeting);
    }
    
[/code]


CC BY-SA 4.0
2022-05-12T11:04:51.443
88784
2022-05-13T14:26:03.710
2022-05-12T11:37:45.670
3060
51199
question
javascript
console.logの出力結果をブラウザ上で表示したい


アイデアとしてはconsole.logに入力された引数を、DOMを利用してHTMLの要素上に設定するようにすればいいかもしれません。  
ブラウザ上に出力結果が表示されます。  
サンプルコードは以下のものです。

[code]

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script>
    // ページ読み込み時のイベントを登録
    window.onload = function(){
        // ブラウザ上に表示する文字列を保持する一時変数
        let outstr = "";
        // console.logの挙動
        console.log = (...args) => {
            for(let arg of args){
                // console.logに入力された文字列を改行つきで保持
                outstr = outstr + arg + "<br>";
            }
            // HTMLのid="console"に対して文字列outstrを設定する
            document.getElementById("console").innerHTML = outstr;
        }
    
        // 当質問のコード
        let greeting = "Hello world";
        for (let i = 0; i < 5; i++) {
            console.log(greeting);
        }
    }
    </script>
    </head>
    <body>
    <!-- ブラウザ上の出力先 -->
    <p id="console"/>
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2022-05-13T14:26:03.710
88805
2022-05-13T14:26:03.710
52603
88784
answer