jQueryを使った3分タイマーの作成について

前提・実現したいこと

javascript,jQuery共に初心者です。
jQueryを使う事で変数を入れなくていいという所だけ理解しています。

Javascriptでは作成出来たので、それを参考にjqueryで書き換えれる部分を書き換えましたが、
スタートボタンとストップボタンが動きません。リセットボタンは動きましたが、押した数秒後'timeUp'が出てきておかしな事になります。

検証ツールでも問題が出てこないので、これ以上どうしたらいいのかわかりません。
改善できる所をアドバイス頂ければ有難いです。
よろしくお願いします。

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

タイマーのスタート、ストップボタンが動かない。
リセットボタンは動きますが、少しおかしい。

エラーメッセージ

該当のソースコード

jQuery
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイマー</title>
    <link rel="stylesheet" href="../JS09/timer.css">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    
  <script>
  var counter;
  var time = 180;
function countStart( ){
              counter = setInterval(count, 100);
               toggle($('#start_button').prop('disabled'));
               } 
             

function countStop( ){
              clearInterval(counter);
              toggle($('#stop_button').prop('disabled'));
               }
      
function countReset( ){
            
             time = 180
              
             clearInterval(counter);
             toggle();
                $('#min').text('03')
                $('#sec').text('00')
                $('#timeUp').css('display','none');
                $('#timerLavel').css('display','block');
               }
                
        
function toggle(x){
                if(x===false){
                   $('#start_button').prop('disabled',false);
                    $('#stop_button').prop('disabled',true);
                    

                } else {
                     $('#start_button').prop('disabled',true);
                    $('#stop_button').prop('disabled',false);
                }   
            }


function count( ) {
        if( time === 0) {
            $('#timeUp').css('display','block');
            $('#timeUp').css('color','red');
            $('timerLavel').css('display','none');
               clearInterval(counter);
                 } else {
                       time -= 1;
                       $('min').text('time % 60');
                       $('sec').text('Math.floor(time /60)');
                 }
                }
                        
       
            var timerLavel = timerLavel; 
            var timeUp = timeUp;  
            $(function(){
                   $('#start_button').click(countStart);
                    $('#stop_button').click(countStop);
                     $('#reset_button').click(countReset);
            });
        
 </script>
</head>
  <body>
    <div class="container">
       <h1 class="title">Stop watch</h1>
       <h1 id="timerLavel"><span id ="min">00</span>:<span id ="sec">00</span></h1>
       <h1 id="timeUp">TimeUp!</h1>
      <div class="set">
        <button id="start_button">スタート</button>
        <button id="stop_button">ストップ</button>
        <button id="reset_button">リセット</button>
      </div>
   </div>
  </body>
</html>





機能してるJavascriptのソースコード↓

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイマー</title>
    <link rel="stylesheet" href="timer.css">
    
  <script>
  var counter;
  var time = 180;
  var start;
  var stop;
 
function countStart( ){
              counter = setInterval(count, 100);
              toggle();
              }

function countStop( ){
              clearInterval(counter);
              toggle();
               }


function countReset( ){
              var min= document.getElementById('min');
              var sec= document.getElementById('sec');
              time = 180
              sec.innerHTML = '00';
              min.innerHTML = '03';
              
              clearInterval(counter);
              timeUp.style.display ='none';
              timerLavel.style.display='block';  
              if(start.toggle){
                    toggle();
                }
               }
               
function toggle(){
                if(start.disabled){
                    start.disabled = false;
                    stop.disabled = true;
                } else {
                    start.disabled = true; 
                    stop.disabled = false; 
                }   
            }

function count( ) {
        var min= document.getElementById('min');
        var sec= document.getElementById('sec');
        if( time === 0) {
                       timeUp.style.display ='block';
                       timeUp.style.color ='red';
                       timerLavel.style.display='none';        
                       clearInterval(counter);
                 } else {
                       time -= 1;
                        sec.innerHTML = time % 60;
                        min.innerHTML = Math.floor(time /60);
                 }
                }
                        
         window.onload = function(){
            var timerLavel= document.getElementById('timerLavel');
            var timeUp= document.getElementById('timeUp');
            start = document.getElementById('start_button');
            stop = document.getElementById('stop_button');
            var reset = document.getElementById('reset_button');
            start.addEventListener('click',countStart,false);
            stop.addEventListener('click',countStop,false);
            reset.addEventListener('click',countReset,false);
        }
 
 </script>
</head>
  <body>
    <div class="container">
       <h1 class="title">Stop watch</h1>
       <h1 id="timerLavel"><span id ="min">00</span>:<span id ="sec">00</span></h1>
       <h1 id="timeUp">TimeUp!</h1>
      <div class="set">
        <button id="start_button">スタート</button>
        <button id="stop_button">ストップ</button>
        <button id="reset_button">リセット</button>
      </div>
   </div>
  </body>
</html>












### 試したこと

javascriptの変数に変える部分はjQueryに書き換えて、検証ツールで問題がでる部分は修正しました。

### 補足情報（FW/ツールのバージョンなど）

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

thyda.eiqau

2020/02/08 10:00 編集

ご自身でこちらの質問ページを開いたときに、ソースコードが非常に見づらいことにお気づきでしょうか。適切にコードブロック機能を利用できていないのが原因です。我々としても読むのが大変です。質問本文は編集できますので、次のように編集してください。 - - - - - ```ここに言語名を入力 jQuery ソースコード <!DOCTYPE html> の4行を、 ```html <!DOCTYPE html> の2行に置き換えてください。 - - - - - </html> 機能してるJavascriptのソースコード↓ <!DOCTYPE html> の5行を、 </html> ``` 機能してるJavascriptのソースコード↓ ```html <!DOCTYPE html> の5行に置き換えてください。 - - - - - </html> ### 試したことの3行を、 </html> ``` 試したことの3行に置き換えてください。 - - - - - 本文を編集しているとプレビューが表示されますよね。コード部分が適切に表示されていることを確認してください。

行動規範の内容に同意します

回答1件

ベストアンサー

動いていない原因として

$('min').text('03')になっており、$('#min’)などに修正
function toggle()部分でstart,stopの動作が同じになっているため、動作を切り替える
$(‘要素名’).text('time % 60');のような感じだと'time % 60'のテキストが表示されてしまうため、$(‘要素名’).text(time % 60);に修正

などで動きについては行われると思います。

こちらに実行するcodepenのURLも貼り付けておきます。
https://codepen.io/miwashutaro0611/pen/ZEGYRXO?editors=1010

投稿2020/02/09 01:26

jackmiwamiwa

総合スコア395

kasabranka

2020/02/09 04:00

jackmiwamiwa　さん大変わかりやすいアドバイスありがとうございました。今後は＃を入れる事や、シングルーコーテーションをつけるかつけないかの確認をしっかりしようと思います。こちら修正後動作する様になりましたが、表示がminとsecが逆ですが左をminで右をsecにするにはどうしたら良いでしょうか？HTMLには左→min 右→secになってます。

行動規範の内容に同意します