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

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

ただいまの
回答率

87.34%

jQueryを使って3分タイマーを制作

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,404

score 19

実現したいこと

jQueryを使って3分タイマーを制作したいです。

必須項目としては以下となります。
1.カウントは03:00からスタートする
2.スタートボタンを押すと1秒ずつカウントが進む
3.カウントが00:00になったら「Time UP!」と表示する
4.ストップボタンを押すとカウントが止まる
5.リセットボタンを押すとカウントが03:00に戻り、カウントが止まる

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

既にJavaScriptで制作したものがあり、それをベースにjQueryで制作するのですが、
スタートやストップ、リセットを押しても、何も反応がありません。

該当のソースコード

【ベースとなるJavaScriptのコード】

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>タイマー制作</title>
        <link rel="stylesheet" href="timer.css">
        <script>
            window.onload = function(){


            var time = 180;
            var interval;
            var min = document.getElementById('min');
            var sec = document.getElementById('sec');
            var start = document.getElementById('start');
            var stop = document.getElementById('stop');
            var reset = document.getElementById('reset');

            //start
            start.onclick = function() {
                toggle();
                interval = setInterval(count, 1000);
            }

            //stop
            stop.onclick = function(){
                toggle();
                clearInterval(interval);
            }

            //reset
            reset.onclick = function() {
                time = 180;
                sec.innerHTML = time % 60;
                min.innerHTML = Math.floor( time / 60 );
                clearInterval(interval)
                if(start.toggle){
                    toggle();
                }
            }

            //中身1
            function toggle(){
                if(start.disabled){
                    start.disabled = false;
                    stop.disabled = true;
                } else {
                    start.disabled = true; 
                    stop.disabled = false; 
                }   
            }

            //中身2
            function count(){
                if(time === 0){
                    min.innerHTML = 0;
                    sec.innerHTML = 0;
                    toggle();
                    alert("Time UP!");
                     clearInterval(interval);
                } else {
                    time -= 1;
                    sec.innerHTML = time % 60;
                    min.innerHTML = Math.floor( time / 60 );
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="timer">
            <p>
                <span id="min">3</span> m
                <span id="sec">0</span> s
            </p>
            <p>
                <button id="start">start</button>
                <button id="stop">stop</button>
                <button id="reset">reset</button>
            </p>
        </div>
    </body>
</html>


【現在作成中のjQuery】

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>「jQuery」タイマー制作</title>
        <link rel="stylesheet" href="timer_jquery.css">
        <script src="jquery-3.3.1.min.js"></script>
        <script>

        $(function(){

            var time = 180;
            var interval;
            //start
            $('#start').on('click',function start_event(){
                toggle();
                interval = setInterval(count, 1000)
                });

            //stop
            $('#stop').on('click',function stop_event(){
                toggle();
                clearInterval(interval)
                });

            //reset
            $('#reset').on('click',function reset_event(){
                time=180;
                $('#sec').html(time & 60);
                $('#min').html(Math.floor(time/60));
                clearInterval(interval)
                if(start.toggle){
                    toggle();
                }
            });

            //表示
            function toggle(){
                if(start_event.disabled){
                    start_event.disabled = false;
                    stop_event.disabled = true;
                } else {
                    start_event.disabled = true; 
                    stop_event.disabled = false; 
                }   
            }

            //中身
            function count(){
                if(time === 0){
                    $('#min').html(0);
                    $('#sec').html(0);
                    toggle();
                    alert("Time Up!");
                    clearInterval(interval)
                } else {
                    time -= 1;
                    $('#min').html(Math.floor(time/60));
                    $('#sec').html(time % 60);
                }
            }

            });
        </script>
    </head>
    <body>
        <div id="timer">
            <p>
                <span id="min">3</span> m
                <span id="sec">0</span> s
            </p>
            <p>
                <button id="start">start</button>
                <button id="stop">stop</button>
                <button id="reset">reset</button>
            </p>
        </div>
    </body>
</html>

試したこと

JSに記載のある「innerHTML」をどう表現したらいいか分からず、$('#').html();と表記していますが、
これで合っているのでしょうか?

ご回答、お待ちしております。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/02/19 14:05

    「ダメでした」「うまくいきませんでした」
    他人には何も伝わらない表現方法なので、具体的に起きた現象を書いてください。

    > JSに記載のある「innerHTML」をどう表現したらいいか分からず、$('#').html();と表記していますが、
    これで合っているのでしょうか?

    合ってますが、jQueryのマニュアル・リファレンスを読まれた方が理解が深まると思います。

    キャンセル

  • Suzumi41

    2019/02/19 14:09

    アドバイスありがとうございます。
    初心者のため、分からないことがよく分からなく、うまく伝えられずに申し訳ございません。。。
    追加致しました。

    キャンセル

回答 2

checkベストアンサー

+3

スタートやストップ、リセットを押しても、何も反応がありません。

ブラウザ開発ツールのコンソールをチェックしてください。
エラーが出ています。

下記はスタート押したときの例
イメージ説明

「未定義の変数」を指摘するエラーではありますが、
単にボタンの活性、非活性制御したいのであれば下記を使います。

判定にはis()を使います。

となると、clickイベントでつけた名前がほぼ意味なくなりますね。
$('#start').on('click',function start_event(){


蛇足。
ちなみに、有志がこんなものを作ってくれています。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/19 16:29

    ディベロッパーツールを使ってエラーを調べたところ、jQuery自体が上手く読み込まれていなかったことが判明致しました。。。

    ①<script src="jquery-3.3.1.min.js"></script>
    ⇒<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>と修正。

    ②ご指摘頂いたclickイベントでつけた名前を削除。

    ③リセット
    $('#sec').html(time & 60);
    ⇒$('#sec').html(time % 60);に修正

    こちらでうまく実行できました・・・!
    ディベロッパーツールがとても大事なことが分かりましたので
    今後は有効活用していくように致します。

    とても早い返信を頂き、ありがとうございました!

    キャンセル

  • 2019/02/19 16:31

    http://は今はよろしくないのでCDN使うのでしたらこちら「jQuery Core 3.3.1」の横のリンクからとってください。
    https://code.jquery.com/

    キャンセル

  • 2019/02/19 16:33 編集

    そうなんですね、上記のように修正致します。
    ありがとうございます!

    キャンセル

+3

スタートやストップ、リセットを押しても、何も反応がありません。

開発者ツールを開いて、コンソールウィンドウを見るとエラーが出てませんか?
パッと見た感じtoggle()の中で使われているstart_eventstop_eventという変数を
宣言していないように見えますが、そのエラーですかね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/19 16:31

    確かにコンソールにエラーが出ていたので調べた所、jQueryが上手く読み込まれていませんでした。
    今までコンソールを確認するという作業をしてこなかったので、今後はコンソールも一緒に確認する癖をつけていこうと思います。

    即レス頂き、感謝致します!!

    キャンセル

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

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る