フォームでエンターを押すと初期状態に戻ってしまう

漢字クイズを作っています。
出題された漢字の読み仮名をフォームにすると次の問題が表示される、というものなのですが、フォーム上でエンターを押すと何故かスタートの状態に戻ってしまいます

<body>
  <p id="hurigana"></p>
  <p id="target"></p>
  <p id="start"></p>
  <span id="timer"></span>
  </p><form>
    <input type="text" id="fkanji" />
</form>
  <script>
  (function() {
    'use strict';

    var words = [
    ["犬","いぬ"],
    ["猫","ねこ"],
    ["猿","さる"]
    ];
    var currentWord;
    var timer;
    var target = document.getElementById('target');
    var start =document.getElementById('start')
    var timerLabel = document.getElementById('timer');
    var fkanji=document.getElementById('fkanji');
    var hurigana=document.getElementById('hurigana')
    var isStarted;
    var timerId;
    var kotae;
    var huseikai;

    function init() {
      currentWord = '漢字クイズ';
      hurigana.innerHTML="";
      target.innerHTML = currentWord;
      start.innerHTML="スタート"
      isStarted = 1;
      huseikai=false;
      timerLabel.innerHTML ="";
      clearTimeout(timerId);
    }

    init();


    function setTarget() {
      var kanji;
      fkanji.focus();
      kanji = words[Math.floor(Math.random() * words.length)];
      currentWord= kanji[0];
      kotae =kanji[1];
      target.innerHTML = currentWord;
      timer = 5;
      timerLabel.innerHTML = timer;
      updateTimer();

       fkanji.addEventListener("input", function () {
            if (fkanji.value === kotae && huseikai==false) {
                setTarget();
                clearTimeout(timerId);
                fkanji.value='';
            }
        });




      function updateTimer() {
        timer--;
        timerId = setTimeout(function() {
        timerLabel.innerHTML = timer;
          if (timer <= 0) {
          isStarted=3;
          huseikai=true;
          hurigana.innerHTML=kotae;
          timerLabel.innerHTML = "";
          start.innerHTML = "もう一度";
          clearTimeout(timerId);
          return;
          }
        updateTimer();
        }, 1000);
      }




    }


   
        start.addEventListener('click', function() {
        if (isStarted==1) {
        isStarted = 2;
        start.innerHTML="<br>";
        setTarget();
         } else if (isStarted==2){
         } else{ 
          init();
        }
       });



  })();
  </script>

どうすれば解決できるでしょうか？

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

回答2件

ベストアンサー

あえてやるならばこのような感じになると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<p id="hurigana"></p>
15<p id="target"></p>
16<p id="start"></p>
17<span id="timer"></span>
18<form id="form1">
19    <input type="text" id="fkanji">
20</form>
21<script>
22    (function () {
23        'use strict';
24
25        var words = [
26            ["犬", "いぬ"],
27            ["猫", "ねこ"],
28            ["猿", "さる"]
29        ];
30        var currentWord;
31        var timer;
32        var target = document.getElementById('target');
33        var start = document.getElementById('start');//セミコロン
34        var timerLabel = document.getElementById('timer');
35        var fkanji = document.getElementById('fkanji');
36        var hurigana = document.getElementById('hurigana');//セミコロン
37        var isStarted;
38        var timerId;
39        var kotae;
40        var huseikai;
41
42        function init() {
43            currentWord = '漢字クイズ';
44            hurigana.innerHTML = "";
45            target.innerHTML = currentWord;
46            start.innerHTML = "スタート";//セミコロン
47            isStarted = 1;
48            huseikai = false;
49            timerLabel.innerHTML = "";
50            clearTimeout(timerId);
51        }
52
53        init();
54        
55        //追加ここから。
56        var form1 = document.getElementById("form1");
57        form1.addEventListener("submit", function (e) {
58            e.preventDefault();
59        }, false);
60        //追加ここまで。
61
62        function setTarget() {
63            var kanji;
64            fkanji.focus();
65            kanji = words[Math.floor(Math.random() * words.length)];
66            currentWord = kanji[0];
67            kotae = kanji[1];
68            target.innerHTML = currentWord;
69            timer = 5;
70            timerLabel.innerHTML = timer;
71            updateTimer();
72
73
74            fkanji.addEventListener("input", function () {
75                if (fkanji.value === kotae && huseikai == false) {
76                    setTarget();
77                    clearTimeout(timerId);
78                    fkanji.value = '';
79                }
80            });
81
82            function updateTimer() {
83                timer--;
84                timerId = setTimeout(function () {
85                    timerLabel.innerHTML = timer;
86                    if (timer <= 0) {
87                        isStarted = 3;
88                        huseikai = true;
89                        hurigana.innerHTML = kotae;
90                        timerLabel.innerHTML = "";
91                        start.innerHTML = "もう一度";
92                        clearTimeout(timerId);
93                        return;
94                    }
95                    updateTimer();
96                }, 1000);
97            }
98
99
100        }
101
102        start.addEventListener('click', function (e) {
103            if (isStarted == 1) {
104                isStarted = 2;
105                start.innerHTML = "<br>";
106                setTarget();
107            } else if (isStarted == 2) {
108            } else {
109                init();
110            }
111        });
112    })();
113</script>
114</body>
115</html>

投稿2017/02/22 06:48

s8_chu

総合スコア14731

<form> を使わなければいいのでは？

HTML
1  <p id="hurigana"></p>
2  <p id="target"></p>
3  <p id="start"></p>
4  <span id="timer"></span>
5  <input type="text" id="fkanji" />

投稿2017/02/21 16:13

kei344

総合スコア69608

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

フォームでエンターを押すと初期状態に戻ってしまう

関連した質問