プログラミングの練習に、JavaScriptでタイピングゲームを制作しています。
問題のランダム表示、制限時間は問題なく動作したのですが、解答決定後の正誤判定がうまくいきません。
解答入力後、解答ボタンを押す、Enterキーを押すなどしても、正誤判定が行われず別の問題に切り替わってしまいます。
該当のソースコード
HTML
1<pre class="lang:js decode:true"> 2 3 4<h1><p id="subject"></p></h1> 5 <form name="myform" onsubmit="check()"> 6 <input mame="mytext" type="text"> 7 <input type="submit" value="解答"/> 8 </form> 9<h3><p id="timer"></p></h3> 10 11 12<script> 13 14const subject = document.getElementById('subject'); 15const timer = document.getElementById('timer'); 16const form = document.forms.typing; 17const textList = [ 18 "いろはにほへとちりぬるを", 19 "なにぬねの", 20 "あいうえお", 21 "あかさたな", 22 "はまやらわ" 23]; 24 25const rnd = Math.floor(Math.random() * textList.length); 26subject.textContent = textList[rnd]; 27let TIME = 10; 28let count = 0; 29let state = true; 30 31 32const countdown = setInterval(function() { 33 timer.textContent = '制限時間:' + --TIME + '秒'; 34 if(TIME <= 0) finish(); 35}, 1000); 36 37 38function check(){ 39 if(!state) return; 40 if(document.myform.mytext.value === subject.textContent) { 41 count++; 42 init(); 43 } else { 44 subject.textContent = '間違いです!'; 45 setTimeout(function(){ init() },1000) 46 } 47}; 48 49 50 51function init() { 52 const rnd = Math.floor(Math.random() * textList.length); 53 54 subject.textContent = textList[rnd]; 55 form.input.value = ''; 56 form.input.focus(); 57} 58 59function finish() { 60 clearInterval(countdown); 61 subject.textContent = '終了!正解数は' + count + '個でした!'; 62 state = false; 63} 64 65</script> 66 67</pre> 68
試したこと
onsubmitではなく、onclickに変更し、クリックされたら判定する方式に変更するなど、判定に入るための条件も変更して試してみましたが結果は変わらず、正しく正誤判定が行われることはありませんでした。
補足情報(FW/ツールのバージョンなど)
VisualstudioCodeを使用しています。
このゲームは、こちらのサイト(https://www.sejuku.net/blog/92667)を参考に開発しています。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/21 06:06