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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2625閲覧

タイピングゲームの正誤判定

Matsuta174320

総合スコア4

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/06/15 06:02

編集2020/06/15 06:03

プログラミングの練習に、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)を参考に開発しています。

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

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

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

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

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

guest

回答2

0

ベストアンサー

とりあえずsubmit止めなきゃいかんのと違う?フォーム要る?

html

1<form name="myform" onsubmit="return false;"> 2 <input name="mytext" type="text"> 3 <input type="submit" value="解答" onclick="check();" /> 4</form>

あとここらへんは動いてないんじゃ?

javascript

1//typingってないよね? 2const form = document.forms.typing; 3 4//formがだめなので多分これもだめ 5 form.input.value = ''; 6 form.input.focus();

投稿2020/06/15 10:06

sousuke

総合スコア3828

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

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

Matsuta174320

2020/06/21 06:06

有難うございます。あれから侍エンジニアさんで公開されている記事をもう一度確認したり、sousuke様のフォームを参考にして開発しましたら、無事Enterキーを押しての正誤判定ができるようになりました。 この度は本当に有難う御座いました。また、返信が遅れてしまい申し訳ありません。
guest

0

<input mame="mytext" type="text">って本当に書いてあるなら、mytextって名前が設定されていないので……

投稿2020/06/15 07:17

Daregada

総合スコア11990

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問