javaScriptログ出力の表示を維持したい

前提・実現したいこと

HTMLを用いて作成したお問合せ画面に入力したテキストを
JavaScriptのコンソールログを用いて確認したいです。

発生している問題・エラーメッセージ

htmlのコンソールに結果が一瞬見えるが、すぐに消えてしまう

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>お問合せ</title>
8    <link rel="stylesheet" href="stylesheet.css">
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
10</head>
11    <body>
12        <script>
13            function onButtonClick() {
14                console.log(document.getElementById("inputName").value);
15                console.log(document.getElementById("inputEmail").value);
16                console.log(document.getElementById("inputAge").value);
17                console.log(document.getElementById("inlineRadio1").value);
18                console.log(document.getElementById("inlineRadio2").value);
19                console.log(document.getElementById("inputDetails").value);
20                return false;
21            }
22        </script>
23        <div id="header">
24            <p>お問い合わせ</p>
25        </div>
26        <div id="nav">
27            <ul>
28                <li><a href="top.html">トップ</a></li>
29                <li><a href="#">ナビ2</a></li>
30                <li><a href="#">ナビ3</a></li>
31                <li><a href="selfIntroduce.html">自己紹介</a></li>
32                <li><a href="contactUs.html">お問い合わせ</a></li>
33            </ul>        
34        </div>
35        <div id="main">
36        </div>
37        <form class="form-horizontal">
38            <div class="form-group">
39                <label for="inputName" class="col-sm-2 control-label">名前</label>
40                <div class="col-sm-10">
41                    <input type="text" class="form-control" id="inputName" placeholder="名前" value="">
42                </div>
43            </div>
44            <div class="form-group">　
45                <label for="inputEmail" class="col-sm-2 control-label">メールアドレス</label>
46                <div class="col-sm-10">
47                    <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレス" value="">
48                </div>
49            </div>
50            <div class="form-group">
51                <label for="inputAge" class="col-sm-2 control-label">年齢</label>
52                <div class="col-sm-10">
53                    <input type="text" class="form-control" id="inputAge" placeholder="年齢"  value="">
54                </div>
55            </div>
56            <div class="form-group">
57                <label class="col-sm-2 control-label">性別</label>
58                <div class="col-sm-10">
59                    <label class="radio-inline">
60                        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value=""> 男性
61                    </label>
62                    <label class="radio-inline">
63                        <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value=""> 女性
64                    </label>
65                </div>
66            </div>
67            <div class="form-group">
68                <label for="inputDetails" class="col-sm-2 control-label">問い合せ内容</label>
69                <div class="col-sm-10">
70                    <input type="text" class="form-control" id="inputDetails" placeholder="問い合せ内容" value="">
71                </div>
72            </div>
73            <div class="form-group">
74                <div class="col-sm-offset-2 col-sm-10">
75                    <div class="checkbox">
76                        <label><input type="checkbox"> Remember me</label>
77                    </div>
78                </div>
79            </div>
80            <div class="form-group">
81                <div class="col-sm-offset-2 col-sm-10">
82                    <input type="submit" value="送信" onclick="onButtonClick();">
83                </div>
84            </div>
85        </form>
86        
87        <div id="footer">
88            <p>&copy; 20xx oo All rights Reserved.</p>
89        </div>
90        
91        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
92        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
93    </body>
94</html>

試したこと

関数の最後にreturn false;を入れると良いとの記事があったので試しましたが
うまくいきません

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

ブラウザはchromeですか？
firefoxなら、サブミット前のログをコンソールに保持したまま
ページ遷移ができますよ

このまま送信をとめて確認したいなら

<input type="submit" value="送信" onclick="onButtonClick();">

を

HTML
1<input type="submit" value="送信" onclick="return onButtonClick();">

として、onButtonClickの中でreturn falseしてください

投稿2020/07/04 01:44

yambejp

総合スコア114850

j_yoshigai

2020/07/04 02:05

回答ありがとうございます。ブラウザはクロームです。 ```return onButtonClick();```と記載することで、コンソールログが表示された状態になることが確認できました!! 現象自体は確認できたのですが、実際にこれはどういうことが起きていたのか理解できていません。 ```onButtonClick()```と宣言した時はvoid型になるということでしょうか？だとしたら、関数内に```return```を記載してもうまく動作しないことは理解できます。

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

ベストアンサー

type="submit"
↓
type="button"

にすれば良いのでは。

投稿2020/07/04 01:41

m.ts10806

総合スコア80850

j_yoshigai

2020/07/04 01:55

回答ありがとうございます!! 入力されたテキストをコンソールログで確認することができました追加で質問があります。 ```submit```と```button```の違いは送信を強制するかどうかという記事を見たのですが、実際にソフトを組む場合、上記二つの```type```はどのように使い分けるのでしょうか？

m.ts10806

2020/07/04 01:58

要件次第です。それにsubmitとbutton以外にもあります。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/button そのままform送信するならsubmitでしょうけど、form囲った中になければ送信はしないのであくまで「form送信」という観点でしょう。基本的にはサーバーサイドで受け取ることを意図しておきます。あとは、本当に要件次第です。

j_yoshigai

2020/07/04 09:56

一概にこの時はこれみたいな感じでは言えないということですね。少し突き詰めて調べてみようと思います。ありがとうございました!!

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

あなたの回答