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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

Q&A

解決済

2回答

5225閲覧

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

Suzumi41

総合スコア19

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

0グッド

0クリップ

投稿2019/02/19 05:04

編集2019/02/19 05:07

実現したいこと

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();と表記していますが、
これで合っているのでしょうか?

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

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

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

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

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

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

m.ts10806

2019/02/19 05:05

「ダメでした」「うまくいきませんでした」 他人には何も伝わらない表現方法なので、具体的に起きた現象を書いてください。 > JSに記載のある「innerHTML」をどう表現したらいいか分からず、$('#').html();と表記していますが、 これで合っているのでしょうか? 合ってますが、jQueryのマニュアル・リファレンスを読まれた方が理解が深まると思います。
Suzumi41

2019/02/19 05:09

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

回答2

0

ベストアンサー

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

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

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

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

jQuery Document:prop()

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

jQuery Document:is()

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


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

投稿2019/02/19 05:21

編集2019/02/19 05:36
m.ts10806

総合スコア80731

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

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

Suzumi41

2019/02/19 07: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);に修正 こちらでうまく実行できました・・・! ディベロッパーツールがとても大事なことが分かりましたので 今後は有効活用していくように致します。 とても早い返信を頂き、ありがとうございました!
m.ts10806

2019/02/19 07:31

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

2019/02/19 07:36 編集

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

0

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

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

投稿2019/02/19 05:14

dice142

総合スコア5158

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

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

Suzumi41

2019/02/19 07:31

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問