下記のconsole.logの出力結果をブラウザ上で表示するにはどうしたらよいのでしょうか?
let greeting = "Hello world";
for (let i = 0; i < 5; i++) {
console.log(greeting);
}
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加する下記のconsole.logの出力結果をブラウザ上で表示するにはどうしたらよいのでしょうか?
let greeting = "Hello world";
for (let i = 0; i < 5; i++) {
console.log(greeting);
}
アイデアとしてはconsole.logに入力された引数を、DOMを利用してHTMLの要素上に設定するようにすればいいかもしれません。
ブラウザ上に出力結果が表示されます。
サンプルコードは以下のものです。
<!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>