javascriptで、出題される問題と同じ文章をタイピングして「正解・不正解」を表示させたい。

前提・実現したいこと

javascriptで出題される問題と同じ文章をタイピングして「正解・不正解」を表示させたい。

■■な機能を実装中に以下のエラーメッセージが発生しました。
出題はできるんですが、
答えを送信しても「正解・不正解」が表示されなくて、困っています。

該当のソースコード

htmlとjavascript　のソースは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>game2:  タイピング</title>
  </head>

  <body>

<p id="text" style="height: 100px;width:150px ; background:pink; "></p> 

<input type="button" value="問題" onclick="question()">
  <script>

    function question(num) {
      const questions = ['aaa', 'bbb', 'ccc'];
      num=0;
      document.getElementById('text').innerHTML = questions[num] ;
    }

  </script>

  
<br><br>

<form action="" method="post" name="type">
  タイピング：<input type="text" name="input">
  <!-- ↓onClickイベントを追加 -->
  <input type="submit" value="送信" onclick="check()">

</form>

<script>



function check(num){
    if (type.input.value == ""){
        //(空の場合)
        alert("文字をを入力してください");    //エラーメッセージを出力
        return false;    //送信ボタン本来の動作をキャンセルします
  
    }else if (type.input.value === questions[num]){alert("正解");
      }
      else{
        alert("違います");
      }
}



</script>





    <script src="js/script.js"></script>
  </body>
</html>

よろしくお願いします。

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

回答2件

ベストアンサー

consoleを確認すればわかりますがquestionsはcheck関数内で使えません
question関数の中で定義されているquestionsを関数外で定義すればうまく動きます

他に色々と直す所ありますがm.tsさんの回答に全てあるので割愛します

投稿2021/04/27 12:07

編集2021/04/27 12:08

mouse_484

総合スコア759

どちらのメソッドも呼び出しは引数なしで定義は引数ありになっていて不整合起きてますが、そこは問題ないでしょうか。

いずれにしても、formタグで囲い、submitボタンだとリクエストをactionに指定した際（未設定、空なら自身）に送信してしまうので、そこじゃないかと。
URLリクエスト送信しないのでしたら、form外すなりsubmitからbuttonに変更するなりEvent.preventDefault()なりで「送信しない」ようにしてください。

そこからがスタートになると思います。

投稿2021/04/27 11:58