Q&A
インデントはきちんと揃えられた方が良いです。
見た感じ、永遠に呼び出されない位置でメソッドを定義しているように見えます。
前提・実現したいこと
JavaScriptで各問題に制限時間付き（10秒）のクイズを作ろうと考えています。
・回答ボタン・アラートのOKボタンを押すと前回分のアラートはリセットされ、リスタートする。
以上のようなことを実現したいと考えています。
よろしくお願いいたします。
該当のソースコード
Javascript
1<!DOCTYPE HTML> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>暗算課題</title> 6</head> 7<body onload="disp()"> 8<h1>暗算課題1000-5</h1> 9<form id="form"> 10<input type="text" id="answer"> 11<input type="button" value="回答する" onclick="check()"> 12</form> 13 14<script type="text/javascript"> 15 16const start = 1000; 17const unit = 5; 18var cur = start; 19 20//回答 21function check(){ 22 if(document.getElementById("answer").value == (cur - unit)){ 23 alert("OK"); 24 cur -= unit; 25//次の問題に回答する 26 }else{ 27 alert("不正解です。もう一度最初から計算してください。"); 28//最初の問題に戻る 29 cur = start; 30 document.getElementById("answer").value = ""; 31} 32 33var alertmsg=function(){ 34alert("10秒経過しました。もう一度最初から計算してください。"); 35 } 36setInterval(alertmsg,10000); 37 38</script> 39</body> 40</html>
mts10806さんのいう通りかと思います。
また、要件確認ですが、
問題の回答をしてからタイマーがスタートするような書き方をされてますが、
そのような動きでよろしいですか？
もし違う場合、合っている場合でも、質問者さんが意図する、流れを、
ページにアクセス
↓
タイマースタート
などといった形で、フローチャート的なものも質問本文に記載いただくと、
回答がつきやすくなるかと思います。
（もしかしたら、フローチャート整理すると、自己解決にさえなるかも）
ご指摘ありがとうございました。ページにアクセスしてからタイマーがスタートするようにしたいと考えていたので、加筆修正致しました。
インデント変えたのはわかりますが、最初と、構文、まるっきり変わってますが・・・。
この状態からなら、タイマーセットでいけるかと思いますが、
ここから、タイマーを自分でくんではみましたか？
まだならば、一度自分でやってみて、それでもわからない部分が出れば、
再度コメントいただく形でいかがでしょうか？
（この状態で、タイマーうんぬんの構文を求める質問だと、丸投げに思われてしまう）
失礼いたしました。コード書きなおしてみましたが、回答ボタン・アラートのOKボタンを押したときにタイマーがリセット・リスタートする方法がわからない状態です…。
わかりました、調べた上で、ここまでやって、なら、
丸投げにはならないかと思います。
回答させていただきます。
回答2件
0
ベストアンサー
うまくいっていない原因は、二点ほどあります。
- 構文が間違っている
よく見ると、関数がしっかり終了になっていないため、構文エラーが起きています。
これは、mts10806さんがおっしゃる通り、インデントをしっかりすると、防げるかと思いますので、
今後注意されるといいかと思います。正しくは下記です。
javascript
1const start = 1000; 2const unit = 5; 3var cur = start; 4 5//回答 6function check(){ 7 if(document.getElementById("answer").value == (cur - unit)){ 8 alert("OK"); 9 cur -= unit; 10//次の問題に回答する 11 }else{ 12 alert("不正解です。もう一度最初から計算してください。"); 13//最初の問題に戻る 14 cur = start; 15 document.getElementById("answer").value = ""; 16 } 17// ここのブロック終了がなっていなかった。 18} 19 20var alertmsg=function(){ 21 alert("10秒経過しました。もう一度最初から計算してください。"); 22} 23setInterval(alertmsg,10000);
ひとまず、これで、ページアクセス時にタイマーが起動はできるかと思います。
- そもそも、setIntervalを終了させていない
これ、終了させないと、そりゃ、回答終えようがなにしようが、
タイマーは動き続けます。
なので、clearIntervalメソッドを使います。
そのために、setIntervalを終了させるために、setIntervalを実行させる際に、返り値を変数に格納する必要があります。
下記のようにしましょう。
javascript
1const start = 1000; 2const unit = 5; 3var cur = start, 4// アラート用のタイマーを外側で持っておく 5 alertTimer = null; 6 7// タイマーの関数定義を先に持ってくる。（未定義エラーを回避） 8// プラス、定義の仕方を変え、setIntervalをクリアできる定義の仕方にする。 9var alertmsg = setInterval(function(){ 10 alert("10秒経過しました。もう一度最初から計算してください。"); 11}, 10000); 12 13 14//回答 15function check(){ 16 if(document.getElementById("answer").value == (cur - unit)){ 17 // 正解の場合は、ここでタイマーをクリアする 18 clearInterval(alertmsg); 19 // アラートのタイマーが生きてるなら、クリア 20 if (alertTimer) { 21 clearTimeout(alertTimer); 22 } 23 alertTimer = setTimeout(function(){ 24 alert("OK"); 25 }, 10); 26 cur -= unit; 27 28 //次の問題に回答する 29 } else { 30 // こちらも一応、アラートのタイマーをいれておく 31 // アラートのタイマーが生きてるなら、クリア 32 if (alertTimer) { 33 clearTimeout(alertTimer); 34 } 35 alertTimer = setTimeout(function(){ 36 alert("不正解です。もう一度最初から計算してください。"); 37 }, 10); 38 39 //最初の問題に戻る 40 cur = start; 41 document.getElementById("answer").value = ""; 42 } 43}
var hoge = setIntervalとすると、タイマーを止めるための、一位のID番号を変数に格納することができ、
その番号を使い、clearIntervalを実行すると、一意のタイマーを止めることできます。
ですが、おそらく、このままでは、次の問題にいくにはどうするの？と、なっていくかと思いますが、
それは、今回のご質問の要件ではないため、わからなければ、別途質問を立てられるといいかと思います。
投稿2019/06/09 04:07
編集2019/06/09 04:52総合スコア9528
すごく個人的にはスペース４つで揃えたい派です。
JavaScriptはわりと2つも採用されてますね。
mts10806さん>おお！
僕は、スペースなら2つ派です 笑
ですが、4つの方が、見落としとか少なくなりそうな気がします。
最近までは、むしろタブ派でしたが、環境や設定によってスペース量が統一されないのと、
タブがうまく機能しない環境ももしかしてあるかもとの懸念から、
スペース派に移行しつつあります 汗
ちょっと宗教戦争になるかもしれませんけどね・・・。
宗教戦争というと、JSだと、ASIがありますが、僕は、どうしてもASI使う派になれない・・・。
ですが、世に、セミコロンレスな言語が増えつつあるので、もしかしたら、
時代ってのもあり、より有効な書き方なような気もしてきてます。
回答ありがとうございます。2つ目のコードお借りして書いてみたのですが、回答ボタンを押してもタイマーが止まらず、10秒ごとにアラートが出たままになってしまうのですが、clearIntervalが上手く作動していないのでしょうか？
うん・・・？
こちらの環境では、止まった動作になりましたが・・・。
正解を回答した時に止まりませんでしたか？
ブラウザ、何をお使いでしょうか？
Microsoft Edge 44.17763.1.0 を使用しています。
Edgeか・・・・。
わかりました、回答修正します。
おそらく、alertの実行タイミングが引っかかってるはずです。
clearIntervalが完了される前に、alertが実行されると、
それ以外の処理がストップされますので、それが原因かと思います。
（ブラウザによって、処理のタイミングが微妙に違う）
私の環境が、Macのため、お手数ですが、再度お試しいただければと思います。
（修正通知いくようにします）
修正しました。
アラートが、少しだけ遅れて実行されるように修正しました。（0.01秒ほど）
それだけの処理遅延なら、気になりませんし、他の処理が間に合わないこともないはずです。
ていうか、Edgeなら、Promise使えば、setTimeout使わないでいけるかも。
お手数をおかけして申し訳ありませんでした。無事にclearIntervalが作動しました。
おお、よかったです！！
0
setTimeout()について調べると良いと思います。
投稿2019/06/08 19:50
総合スコア767
あなたの回答
tips
プレビュー
