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

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

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

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

Q&A

1回答

723閲覧

setIntervalの条件によるクリア方法

tory1317

総合スコア4

JavaScript

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

0グッド

1クリップ

投稿2018/07/08 21:08

編集2022/01/12 10:55

前提・実現したいこと

HTMLとJavaScriptを使って2択クイズを作成しているのですが、問題1問ごとに制限時間(ここでは3秒)を設けてその設定時間が経過すると自動で次の問題へ進むような仕様にしたいと考えています。しかし、3秒ごとで自動でボタンを押したことにしようとsetIntervalを定義したものの、ユーザが回答を選択して次の問題へ進んでもカウントがclearIntervalを使用してもリセットされないことがわかりました。これだと、全ての問題に対して3秒の回答時間が確保できないので、ユーザがボタンを選択した場合はsetIntervalをリセットしたいと考えています。どのようにclearIntervalを書けばいいか教えていただきたいです。

発生している問題・エラーメッセージ

ユーザが回答を選択しようがしまいが必ず3秒ごとに不正解の処理がされてしまう。

エラーメッセージ

該当のソースコード

Javascript

1// 問題 2var qa = [ 3 ['私は毎晩自分の部屋でラジオを聞きます。', 2], 4 ['私はその時二十歳でした。', 1], 5 ['あれは京都の写真ですか。', 1], 6 ['多くの人が日曜日ごとに教会へ行きます。', 2], 7 ['私は友達と放課後公園でサッカーをします。', 2], 8 ['父は毎日朝食の前に新聞を読みます。', 2], 9 ['メアリーとナンシーは仲良しです。', 1], 10 ['その質問は私にとっては難しかった。', 1], 11 ['両親は先週日本にいませんでした。', 1], 12 ['私はボブと毎日この公園を走ります。', 2], 13 ['ジェーンの姉は英語の先生ですか。', 1], 14 ['兄と私は毎朝自転車で学校へ行きます。', 2], 15 ['私は毎日午前7時に起きます。', 2], 16 ['あなたは先週金曜日に職場にいましたか。', 1], 17 ['私はサッカーが好きです。', 2], 18 ['ボブのおじいさんは昔、野球の名選手だった。', 1], 19 ['弟は自分の部屋で毎日テレビで野球の試合を見ます。', 2], 20 ['その若い夫婦はクリスマスイブの夜、とても幸福でした。', 1], 21 ['ケンと私は今日公園でアヤとミドリとテニスをします。', 2], 22 ['デービッドは去年の7月ニューヨークにいましたか。', 1], 23]; 24// 初期化 25var count = 0; 26var correctNum = 0; 27 28window.onload = function() { 29 // 最初の問題を表示 30 var question = document.getElementById('question'); 31 question.innerHTML = (count + 1) + '問目:' + qa[count][0]; 32 disp(); // タイマー表示 33 step(); // 制限時間 34}; 35 36 37// クリック時の答え判定 38function judge(btnNo) { 39 if (qa[count][1] == btnNo) { // 正解の場合 40 correctNum++; 41 var answer = document.getElementById('wrapper'); 42 answer.style.backgroundColor = '#58ACFA'; 43 document.getElementById('Good').play(); 44} else { // 不正解の場合 45 var answer = document.getElementById('wrapper'); 46 answer.style.backgroundColor = '#FA5858'; 47 document.getElementById('Bad').play(); 48} 49 50 // 全問終了後 51 if (count == 19) { 52 if ( count+1 == correctNum ) { //全問正解の場合 53 document.getElementById('Allclear').play(); 54 } 55 if ( min == 0 ) { // クリア時間が1分未満の場合 56 alert('正解数は' + correctNum + '問です!\nクリア時間は' + sec + '秒です'); 57 } else { 58 alert('正解数は' + correctNum + '問です!\nクリア時間は' + min + '分' + sec + '秒です'); 59 } 60 } 61 62 // 次の問題表示 63 count++; 64 var question = document.getElementById('question'); 65 question.innerHTML = (count + 1) + '問目:' + qa[count][0]; 66} 67 68 // ここで1問ごとに制限時間3秒を設けたいです 69function step() { 70 var Handler = setInterval('judge(3)', 3000); 71 if ( document.getElementById('buttons').class == 'button') { clearInterval(Handler); } // この条件文がうまく機能しない 72} 73 74var start = new Date(); 75 76// 初期化 77var hour = 0; 78var min = 0; 79var sec = 0; 80var now = 0; 81var datet = 0; 82var hour1, min1, sec1; 83 84function disp(){ 85 86 now = new Date(); 87 88 datet = parseInt((now.getTime() - start.getTime()) / 1000); 89 90 hour = parseInt(datet / 3600); 91 min = parseInt((datet / 60) % 60); 92 sec = datet % 60; 93 94 // 数値が1桁の場合、頭に0を付けて2桁で表示する指定 95 if(hour < 10) { hour = "0" + hour; } 96 if(min < 10) { min = "0" + min; } 97 if(sec < 10) { sec = "0" + sec; } 98 99 // フォーマットを指定(不要な行を削除する) 100 var timer1 = hour + ':' + min + ':' + sec; // パターン1 101 102 // テキストフィールドにデータを渡す処理(不要な行を削除する) 103 document.form1.field1.value = timer1; // パターン1 104 105 setTimeout("disp()", 1000); 106} 107

試したこと

関数step()内の条件分岐でボタンを押された場合はsetIntervalをキャンセルさせるようclearIntervalを記述したが、機能しない。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

投稿2018/07/08 21:19

efcode

総合スコア422

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

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

tory1317

2018/07/08 21:24

clearIntervalは条件付きで使用しているのですが、なぜかうまく動いてくれないのでその理由を知りたいです…。
efcode

2018/07/08 21:32

今書かれているstep関数の内容は、 HandlerにsetIntervalのIDを受ける(一行目) if条件によりclearIntervalをコールする(二行目) 理解してます? 回答した時点でclearIntervalをコールしてください。
tory1317

2018/07/08 22:16

知識不足で申し訳ありません。私としてはif条件で回答した時点を判定させられるかと思っていました。judge関数でも書いてみたのですがダメでした…。もう少しヒントをいただけないでしょうか?
efcode

2018/07/09 06:41

step関数内でvarした変数はローカル変数になるので他の関数内では使用できません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問