JS　タイマー　二度押し防止

閲覧頂きありがとうございます。

JSで３分タイマーを作っているのですが、
現在スタート、ストップ、リセットが出来るものの
スタートを２押すことができる状態になってしまいました。

お手数をおかけしますが、２度押し防止策が調べてもわからなかった為
現状のコードからどうすればよいか教えていただけますでしょうか。

※タイマー自体は３秒刻みで減るように設定しております。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
    <link rel="stylesheet" href="timer.css">
   <title>challenge_dom</title>
  <link rel="stylesheet" href="timer2.css">
  <script>
  var counter;
  var time=180;
  
  
  function countstart(){
    counter = setInterval(count,500);
  }

  function count(){
    if(time===0){
      countstop();
      display("time_up");
    }else{
      time-= 3;
      display();
    }
  }

  function countstop(){
    clearInterval(counter);
  }

  function countreset(){
    countstop();
    time=180;
    display();
  }



  function display(message){
    var out =document.getElementById("out");

    if(!message){//display("time_up")の引数がない場合
      var second =time % 60;
      var minitue =Math.floor(time / 60);
      out.innerHTML =  + minitue + ":" +(second < 10 ? "0": "") + second;
    }else{
      out.innerHTML = message; 
    }
  }



  window.onload = function(){
    var start =document.getElementById("start_button");
    var 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);
    display();
  }
  </script>
  <body>
    <div id="blackbox">
      <div id="out">
        <span id ="min">00</span>:<span id ="sec">00</span>
      </div>
      <div id="button_area">
        <input type="button" value="start" id="start_button"  onClick="disable">
        <input type="button" value="stop" id="stop_button"   onClick="disable">
        <input type="button" value="reset" id="reset_button"  onClick="disable">
      </div>
    </div>
  </body>

itagagaki

2021/05/07 16:44

btn.disabled = true; これ何ですか？

nakayamaakg

2021/05/07 16:46

申し訳ございません。 btn.disabled = true;に関しては試行錯誤の末書いたもので誤って残したまま質問してしまいました。今気づいて消しました。

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

回答2件

ベストアンサー

15行目と75行目でエラーが出てますね。
Ctr + Shift + J　でコンソールが確認できるので、質問する際はそのエラーを一緒に張った方がよいでしょう。

さて、onClick属性には関数名を書くのがルールです

html
1<input type="button" value="start" id="start_button"  onClick="disable()">

javascript
1function disable(){
2    document.getElementById('start_button').setAttribute('disabled',true)
3}

実際には、これに追加でstopのときにdisableをfalseにしてあげる処理が必要になります

0.5秒で3秒分進むのは気にしないことにします。

投稿2021/05/07 16:57

moscow3

総合スコア201

nakayamaakg

2021/05/08 17:34 編集

回答頂きありがとうございます。上記対応により、確かにスタートボタンの2度押しが出来なくなることを確認し、更にCtr + Shift + J　でコンソールを開き、スタートリセットを押した際にエラーが発生していたことを確認しました。この件で、ストップを押したときにスタートを押せるようにして、かつリセットを押したらスタートとストップを押せるようにしたいのですが、思いついた以下のコードではすべてのボタンが一度押したらなぜか押せなくなるので、なぜダメなのか教えて頂けませんでしょうか。。。 function disable(){ document.getElementById('start_button').setAttribute('disabled',true) } function disable2(){ document.getElementById('start_button').setAttribute('disabled',false) document.getElementById('stop_button').setAttribute('disabled',true) } function disable3(){ document.getElementById('reset_button').setAttribute('disabled',true) document.getElementById('start_button').setAttribute('disabled',false) document.getElementById('stop_button').setAttribute('disabled',false) } window.onload = function(){ var start =document.getElementById("start_button"); var 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); display(); } </script> <body> <div id="blackbox"> <div id="out"> <span id ="min">00</span>:<span id ="sec">00</span> </div> <div id="button_area"> <input type="button" value="start" id="start_button" onClick="disable()"> <input type="button" value="stop" id="stop_button" onClick="disable2()"> <input type="button" value="reset" id="reset_button" onClick="disable3()">

nakayamaakg

2021/05/09 06:58 編集

下記のコードにて２度押しが解決出来ました連絡致します。 function disable1(){ const button1 = document.getElementById('start_button'); const button2 = document.getElementById('stop_button'); button1.disabled = true; if(countstop,true){ button2.disabled = false; } } function disable2(){ const button1 = document.getElementById('start_button'); const button2 = document.getElementById('stop_button'); button2.disabled = true; button1.disabled = false; } function disable3(){ const button1 = document.getElementById('start_button'); const button2 = document.getElementById('stop_button'); const button3 = document.getElementById('reset_button'); button1.disabled = false; button2.disabled = false; button3.disabled = false; } window.onload = function(){ var start =document.getElementById("start_button"); var 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); display(); } </script> <body> <div id="blackbox"> <div id="out"> <span id ="min">00</span>:<span id ="sec">00</span> </div> <div id="button_area"> <input type="button" value="start" id="start_button" class="button" onClick="disable1()"> <input type="button" value="stop" id="stop_button" class="button" onClick="disable2()"> <input type="button" value="reset" id="reset_button" class="button" onClick="disable3()">

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

いろいろアプローチがあると思いますが、一番手っ取り早いのは

JavaScript
1var running = false; // グローバル変数
2
3function countstart(){
4  if (!running) {
5    running = true;
6    counter = setInterval(count,500);
7  }
8}
9
10function countreset(){
11  countstop();
12  time = 180;
13  running = false;
14  display();
15}