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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1813閲覧

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

828kk88

総合スコア61

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/02/21 15:35

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

<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>

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

<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

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問