Q&A
ご指摘ありがとうございます！！直したらちゃんと動作しました！！またよろしくお願いします！！！
全くの初心者です！
javascriptで作成した３分カウントダウンタイマーの内容をjQueryを使って作成という課題です。
要素を取得して関数を作成するところまでは少しばかり理解しているつもりですが、jQueryを用いて表示したらタイマーが動作しません！
どこのコードが間違っているのか、アドバイスいただけたらと思います！
よろしくお願いします！
今のところjavascriptのコードは下記のコードで問題なく動作しますが、直した方がいいところがあれば是非ご指摘お願い致します！
⬇️javascriptのみのコード
javascript
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>カウントダウンタイマー</title> 6 <script> 7 8 var id; 9 var time = 180; 10 var min = 0; 11 var sec = 0; 12 13 function count_start(){ 14 id = setInterval(count_down,100); 15 } 16 17 function count_down(){ 18 var timer = document.getElementById("timer"); 19 if(time === 0){ 20 timer.innerHTML = "TIME UP!!!"; 21 }else{ 22 time--; 23 min = Math.floor(time / 60); 24 sec = Math.floor(time % 60); 25 timer.innerHTML= "0"+ min + ":" + sec; 26 } 27 if(sec < 10){ 28 timer.innerHTML = "0"+ min + ":" + "0" + sec; 29 } 30 } 31 32 function count_stop(){ 33 clearInterval(id); 34 } 35 36 function count_reset(){ 37 var timer = document.getElementById("timer"); 38 timer.innerHTML = "03:00"; 39 } 40 41 window.onload= function(){ 42 var start = document.getElementById("start"); 43 start.addEventListener("click",count_start,false); 44 var stop = document.getElementById("stop"); 45 stop.addEventListener("click",count_stop,false); 46 var reset = document.getElementById("reset"); 47 reset.addEventListener("click",count_reset,false); 48 }; 49 50 </script> 51 </head> 52 <body> 53 <div id="timer">03:00</div> 54 55 <button id="start">start</button> 56 <button id="stop">stop</button> 57 <button id="reset">reset</button> 58 </body> 59</html>
⬇︎javascript + jQuery
jQuery
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>10-5</title> 6 <script src="jquery-3.5.1.min.js"> 7 8 var id; 9 var time = 180; 10 var min = 0; 11 var sec = 0; 12 13 function count_start(){ 14 id = setInterval(count_down,1000); 15 } 16 17 18 function count_down(){ 19 if( time === 0){ 20 $("#timer").html("<p>TIME UP!</p>"); 21 }else{ 22 time--; 23 min = Math.floor(time / 60); 24 sec = Math.floor(time % 60); 25 $("timer").html("0" + min + ":" + sec ); 26 27 if(sec < 10){ 28 $("timer").html("0" + min + ":" + "0" + sec ); 29 } 30 } 31 } 32 33 function count_stop(){ 34 clearInterval(id); 35 } 36 37 function count_reset(){ 38 $("reset").html("03:00"); 39 } 40 41 $(function(){ 42 $("#start").click(count_stop); 43 $("#stop").click(count_stop); 44 $("#reset").click(count_reset); 45 }); 46 47 </script> 48 </head> 49 <body> 50 <div id="timer">03:00</div> 51 52 <button id="start">start</button> 53 <button id="stop">stop</button> 54 <button id="reset">reset</button> 55 </body> 56</html>
回答2件
0
ベストアンサー
テキスト比較ツールで、書き換える前と書き方あとを比較してください。
変えてはいけいない箇所が変わっています。
- count_down関数のブロック（{～}）の構成が変わっている
- #startをクリックしたときに呼び出す関数が変わっている
また#xxxの形式で書くべきセレクタがxxxと書かれている箇所があります。
投稿2020/06/25 01:20
総合スコア4524
0
scriptタグの書き方がまちがっています。
HTML
1<script src="jquery-3.5.1.min.js"></script> 2<script> 3 // 自分のコード 4</script>
読み込みたいコードと実際に自分が埋め込むコードは分けて書いてください。
投稿2020/06/25 01:13
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/25 01:55