回答欄に入力した値によって画面に表示するメッセージを切り分けたい

Question

**回答欄に入力して、内容によってメッセージを切り分けたい
**
Javascriptにて、以下のプログラムを作成しています。
質問に対して回答を入力、送信ボタンを押してもらい
その入力値によって画面に表示されるメッセージを切り分ける。

質問文：How old are you？
回答：数字で年齢を入力
メッセージ（IF構文）：

・20未満→'You are too young'
・20以上30未満→'please come here few years later'
・30以上→'You are perfect age'

Bootstrapを使っています。
条件はIF構文で分岐しています。

回答の入力欄と送信ボタンの連携、
また送信ボタンを押した後の条件分岐との連携が
うまくいきません。

学習初心者でして、無駄な行や必要のない設定が
あるかと思います。
ボタンの設定にonClickやaddEventListenerを
使うのかなと思いますが、いかがでしょうか。
onClickを組み込んでみましたが
動作していません。

3日ほど悩んでいて堂々巡りな状態です。

アドバイス等いただけたらと思います。

    <div class = "container-lg">
        
        <form action="" name = "f" method = "post" class = "row">
            <div class = "col-sm-6 offset-sm-3">
                <div class = "form-group">
                    <label for ="age">How old are you?</label>
                    <input type ="text" name = "answer" class = "form-control" placeholder = "Put your age!!">
                    <button type = "submit" id = "submit" class = "btn btn-primary" onclick="check()" >submit</button>
                </div>
            </div>
        </form>
        <h1 id="test"></h1>
        <div>
            <script type="text/javascript">
                    //var func1 = function(age){
                        let age = document.f.answer.value;
                        let message;
                        function check(){

                            if (age >= 20 && age < 30) {
                                message = 'please come here few years later'
                            }
                            else if (age < 20) {
                                message = 'You are too young'
                            }
                            else {
                                message = 'You are perfect age'
                            }
                        document.getElementById("test").innerHTML = message;

                        };

                        
                    //}   
                
            </script>
        </div>
    </div>

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

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

Answer 1

一応、質問で挙げられた処理で分岐⇒メッセージ出力はできていますよ。

ただ、submitで画面がリロードされていますので
やるのであれば、
・処理中にsubmit中断処理
・window.addEventListener('DOMContentLoaded', ()=>{})
などを使って保管
・formを使用しないなど
ほかにもありますが.....

Comments

[TiffanyM]

ご回答いただきありがとうございます。
submitはリロードされてしまうのですね。
知りませんでした。
なので、入力した値が消えてしまったんですね。
addEventListenerの使い方を練習したいと思います。
window.addEventListener('Click', ()=>{})
しか使ったことがありませんでした。
色々な再現方法があるかと思いますので
他の解決方法も検討してみようと思います。

Answer 2

安易にsubmitしてはいけません

<input type ="text" name = "answer">
<button type="button" onclick="check()" >submit</button>
<h1 id="test"></h1>
<script>
function check(){
  let age = document.querySelector('[name=answer]').value;
  let message;
  if (age<20) {
    message = 'You are too young';
  }else if(age<30){
    message = 'please come here few years later';
  }else{
    message = 'You are perfect age';
  }
  document.getElementById("test").innerHTML = message;
}
</script>

Comments

[yambejp]

細かい例外処理やバリーションはおいおい実装してください

[TiffanyM]

ご回答ありがとうございます。
大変参考になります。
inputの(type)submitは安易に使わない方が良いのですね。
完ぺきに再現できました。
querySelectorというメソッドは初めて出会いました。
しっかり調べて自分自身で使えるように練習しようと思います。
3日ほど悩んでいたので本当に助かりました。
ありがとうございます。