詳しい人求む！

Javasclipt（JSファイル）の内容をHTML（ブラウザ）に出力したいです

解決済

質問者：こもたん
質問日時：2022/03/13 20:01
回答数：2件

Javasclipt（JSファイル）で if文の論理演算子を使った条件式でconsole.logに出力した内容をHTML（ブラウザ）に出力したいのですが、どのような記述をすればいいのでしょうか？
出力はボタンをクリック（イベントリスナー:onclick使用）をしたときに表示するようにしたいです。
どなたか教えていただけると助かります。どうぞよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2022/03/13 20:29

こんばんは

具体的に、何をどうしたいのかよくわかりませんけれど・・

＞console.logに出力した内容をHTML（ブラウザ）に出力したいのですが～
出力の内容と、ブラウザにどのように表示させるのかによります。

出力内容が通常の文字列や数値等であれば、そのまま出力すれば表示できますが、配列やオブジェクトの場合はtoStirng()で文字列化された結果が出力されます。
その結果、[object Object] のような出力になります。
配列やオブジェクトの内容であっても出力は可能ですが、そのように出力するようにスクリプト側に記述する必要があります。

単純に「ブラウザに出力できれば良い」のであれば、
　document.write( 出力内容 );
などとすることで、新しい文書として出力されます。

表示中の文書のどこかに出力したいのであれば、例えば
　<div id="hoge"></div>
とあるDIV要素に出力するものとするなら、
　document.getElementById('hoge').textContent = 出力内容;
とすることで、id="hoge" の要素のテキストとして出力されます。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！

具体的には、
「表示中の文書の中に作ったボタンをクリックした時に、
JSに記述した if や else if で出た結果を表示中の文書のどこかに出力するようにしたい」です。
なので

＞　<div id="hoge"></div>
とあるDIV要素に出力するものとするなら、
　document.getElementById('hoge').textContent = 出力内容;
とすることで、id="hoge" の要素のテキストとして出力されます。

を使用してみたいと思います！
ちなみに、「＝出力内容;」と記載された部分に
console.log　もしくは　if(条件式){console.lg("");} をそのまま入れてもいいのでしょうか？
重ねて質問してしまいすみません。

通報する

お礼日時：2022/03/13 21:29

参考程度に

No.2

回答者： fujillin
回答日時：2022/03/13 22:06

No1です。

説明がよくわからないので、文字列を表示するものと仮定します。

以下は、ボタンを押した時刻によって、「午前」か「午後」かを表示する例です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<button id="fuga" value="fuga">push!</button>
<div id="hoge"></div>

<script>
document.getElementById('fuga').addEventListener('click', ()=>{
const mes = new Date().getHours()<12?'午前です':'午後です';
document.getElementById('hoge').textContent = mes;
});
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！
また、私の説明が下手ですみません。

表示したいのは文字列です。
取り組んでいるのは下記の内容です。

『A君、B君、C君はテストの点数を競い合ってます。
また、テストには合格点があります。　※合格点は60点です。
三人全員が合格している場合は、誰が1番かを出力し、
そうでない場合は誰がテストを合格したかを出力するプログラムを作りなさい。
また、想定される結果を洗い出し、あらゆるパターンを考えて、そのパターンにあった出力をするようにしてください。』

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<p>テスト結果表示プログラム</p>
<input type="button" value="結果を出力" onclick="testFunc()">
<div>結果
<p id="result_display" type="log"></p>
</div>
<script type="text/javascript" src="../js/test.js"></script>
</body>
</html>

上記のようなhtml記述で作成したウェブページの
<p id="result_display" type="log"></p>の要素の部分に、『』の指示することをJSにif文と論理演算子の&&を使用して出した結果を、html記述で作成したウェブページ上の指定の位置に文字列で出力させるにはどうしたらいいのか分からなくなり、質問した次第です。

まだ解決はできてないのですが、教えていただいた内容を参考に取り組んでみようと思います。