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

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

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

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

Q&A

解決済

2回答

1953閲覧

Javascript カウントダウンタイマーの実装 returnの書き方

Mackatta

総合スコア3

JavaScript

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

0グッド

0クリップ

投稿2020/08/01 07:00

前提・実現したいこと

初心者です。
Jsでのカウントダウンタイマー実装にあたり
2点ほど教えていただきたい事があります。

①Javascriptでカウントダウンタイマーを作成しており
スタートボタンが押されたら再度押せなくなるように設定し
ストップボタンを押したら復帰するプログラムを書いたのですが
2度目のスタートボタンを押すと両方無効化になってしまう。
→これを繰り返しても実装できるようにしたい

②リセットボタンを押しても表示は戻るがボタンが復帰しない
→最初の状態に戻したい。

どの部分のコードが間違っているのか、なぜ実装されないのか
自分では説明出来ないのでご回答頂きたいと思います。
初歩的な質問ですがよろしくお願い致します。

該当のソースコード

<!DOCTYP html> <html lang="ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <!--1、htmlで表示される物を書く--> <div id="gamenn">03:00</div> <div class="button3tu"> <button id="start">スタート</button> <button id="stop">ストップ</button> <button id="reset">リセット</button> </div> <script> // 2、windows.onloadでクリックの監視プログラム window.onload = function() { // 3、書き換える為にhtmlを取得 const gamenn = document.getElementById("gamenn"); const time = document.getElementById("time"); const start = document.getElementById("start"); const stop = document.getElementById("stop"); const reset = document.getElementById("reset"); // 4、buttonの具体的な操作(クリックされたら、関数呼び出し、false) start.addEventListener("click", count_start, false); stop.addEventListener("click", count_stop, false); reset.addEventListener("click", count_reset, false); } let interval_id; //setIntervalを使う際にセットで作っておく! let time_hyouzi = 180; //初期値は180(3分)だよ let min = 0; let sec = 0; // 5、スタートボタンの処理を書く function count_start() {  interval_id = setInterval(countDown, 1000) //countDownの関数を1秒ごとに動かす //setIntervalを使う際は箱も一緒に作っておく→clearIntervalでも使うのでグローバル変数で宣言しておくこと //setIntervalは関数countDownを1秒ごとに処理 //スタートが押されたら2重クリック出来ない様に無効化 document.getElementById("start").disabled = true } function countDown() { time_hyouzi-- //--で下がる処理 let min = Math.floor(time_hyouzi / 60); //minは分。2分59秒の時とか小数点が出ちゃうからMath.floorで消す  let sec = time_hyouzi - (min * 60); //secはセコンド=秒 // 48行目は let sec = time_hyouzi % 60; でも行ける gamenn.innerHTML = min + ":" + sec; if(time_hyouzi === 0) { //表示されている値が0になったら↓を表示して gamenn.innerHTML = "time up!!" //.innerHTMLを使ってタイムアップ表示! clearInterval(interval_id) //0になったら止まれ(これが無いと-まで行ってしまう) document.getElementById("stop").disabled = true; //stopを押させない } } function count_stop() { clearInterval(interval_id) //何を止めるの??→interval_idだよ! document.getElementById("stop").disabled = true; //ストップ中はストップを押させない処理 // ストップを押したらスタートを有効にする処理 document.getElementById("start").disabled = false } function count_reset() { //gamennを3:00に戻す処理 time_hyouzi = 180; min = 0; sec = 0; let reset = document.getElementById("gamenn"); reset.innerHTML = "03:00"; } </script> </body> </html>

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

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

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

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

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

guest

回答2

0

ベストアンサー

①2度目のスタートボタンを押すと両方無効化になってしまう。

カウントを止める際に、document.getElementById("stop").disabled = true; と、ボタンを押させないコードを記述しているにも関わらず、再度スタートボタンを押した際に押せるようにボタンを戻す動作を記述していないからです。

②リセットボタンを押しても表示は戻るがボタンが復帰しない

おそらくですが、「リセットボタンを押しても」ではなく、「タイマーが0になったら」ではないでしょうか?
タイマーが0になったら、document.getElementById("stop").disabled = true;とストップボタンを押させないようにしています。そしてタイマーがストップする際はスタートボタンが押されているわけなので、スタートボタンも押せないようになっています。
これがリセットボタン内で元に戻す必要がありますが、それが記述されていないので、どちらのボタンも押せない、という状況ができているのだと思われます。

投稿2020/08/01 07:23

yuuyu

総合スコア1135

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

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

Mackatta

2020/08/01 09:07

2件共理由がわかり納得しました!ありがとうございました!!
guest

0

すでに答えがでているのでコードだけ貼っておきます。

javascript

1 function count_start() {  2 interval_id = setInterval(countDown, 1000) //countDownの関数を1秒ごとに動かす 3 //setIntervalを使う際は箱も一緒に作っておく→clearIntervalでも使うのでグローバル変数で宣言しておくこと 4 //setIntervalは関数countDownを1秒ごとに処理 5 6 //スタートが押されたら2重クリック出来ない様に無効化 7 document.getElementById("start").disabled = true; 8 document.getElementById("stop").disabled = false; // ★これが抜けている 9 }

javascript

1 function countDown() { 2 time_hyouzi-- //--で下がる処理 3 let min = Math.floor(time_hyouzi / 60); //minは分。2分59秒の時とか小数点が出ちゃうからMath.floorで消す  4 let sec = time_hyouzi - (min * 60); //secはセコンド=秒 5 // 48行目は let sec = time_hyouzi % 60; でも行ける 6 gamenn.innerHTML = min + ":" + sec; 7 8 9 10 if(time_hyouzi === 0) { //表示されている値が0になったら↓を表示して 11 gamenn.innerHTML = "time up!!" //.innerHTMLを使ってタイムアップ表示! 12 clearInterval(interval_id) //0になったら止まれ(これが無いと-まで行ってしまう) 13 document.getElementById("stop").disabled = true; //stopを押させない 14 document.getElementById("start").disabled = false; // ★これが抜けている 15 } 16 17 } 18

投稿2020/08/01 07:47

YakumoSaki

総合スコア2027

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

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

Mackatta

2020/08/01 09:06

コメントアウトでのご回答ありがとうございました!
yuuyu

2020/08/01 09:10

2つ目の document.getElementById("start").disabled = false; // ★これが抜けている これはcount_reset()内に記載した方がいいですね。というのも終了判定が==なので、リセットする前にスタートを押してしまうとマイナスまでいくので、せっかく止めた意味がなくなりますので。
Mackatta

2020/08/01 11:04

そうなのですね!早速コードを書き直してみます! ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問