javscriptのタイマーで時間によって表示・非表示を切り替えたい

実現したいこと

javascripyで作業時間、休憩時間を繰り返すタイマーを作成しています。
休憩時間のタイマーが稼働している時にボタンを表示し、作業時間中はボタンを非表示にしたいです。

該当のソースコード

下記のボタンの表示、非表示を連続で行いたい
<button class="button" id="button">ボタン</button>
index.html.erb

<main class="app">
  <progress id="js-progress" value="0"></progress>
  <div class="progress-bar"></div>
  <div class="timer">
    <div class="button-group mode-buttons" id="js-mode-buttons">
      <button
        data-mode="pomodoro"
        class="button active mode-button"
        id="js-pomodoro"
      >
        Pomodoro
      </button>
      <button
        data-mode="shortBreak"
        class="button mode-button"
        id="js-short-break"
      >
        Short break
      </button>
      <button
        data-mode="longBreak"
        class="button mode-button"
        id="js-long-break"
      >
        Long break
      </button>
    </div>
    <div class="clock" id="js-clock">
      <span id="js-minutes">25</span>
      <span class="separator">:</span>
      <span id="js-seconds">00</span>
    </div>
    <button class="button" id="button">ボタン</button>
    <button class="main-button" data-action="start" id="js-btn">
      Start
    </button>
  </div>
</main>
<%= javascript_pack_tag 'worktimes/time' %>

time.js

  const timer = {
    pomodoro: 25,
    shortBreak: 5,
    longBreak: 15,
    longBreakInterval: 4,
    sessions: 0,
  }

  let interval;

  const mainButton = document.getElementById('js-btn');
  mainButton.addEventListener('click', () => {

    const { action } = mainButton.dataset;
    if (action === 'start') {
      startTimer();
    } else {
      stopTimer();
    }
  });

  const modeButtons = document.querySelector('#js-mode-buttons');
  modeButtons.addEventListener('click', handleMode);

  function getRemainingTime(endTime) {
    const currentTime = Date.parse(new Date());
    const difference = endTime - currentTime;

    const total = Number.parseInt(difference / 1000, 10);
    const minutes = Number.parseInt((total / 60) % 60, 10);
    const seconds = Number.parseInt(total % 60, 10);

    return {
      total,
      minutes,
      seconds,
    };
  }

  function startTimer() {
    let { total } = timer.remainingTime;
    const endTime = Date.parse(new Date()) + total * 1000;

    if (timer.mode === 'pomodoro') timer.sessions++;

    mainButton.dataset.action = 'stop';
    mainButton.textContent = 'stop';
    mainButton.classList.add('active');

    interval = setInterval(function() {
      timer.remainingTime = getRemainingTime(endTime);
      updateClock();

      total = timer.remainingTime.total;
      if (total <= 0) {
        clearInterval(interval);

        switch (timer.mode) {
          case 'pomodoro':
            if (timer.sessions % timer.longBreakInterval === 0) {
              switchMode('longBreak');
            } else {
              switchMode('shortBreak');
            }
            break;
          default:
            switchMode('pomodoro');
        }
      }
    }, 1000);
  }

  function stopTimer() {
    clearInterval(interval);

    mainButton.dataset.action = 'start';
    mainButton.textContent = 'start';
    mainButton.classList.remove('active');
  }

  function updateClock() {
    const { remainingTime } = timer;
    const minutes = `${remainingTime.minutes}`.padStart(2, '0');
    const seconds = `${remainingTime.seconds}`.padStart(2, '0');
  
    const min = document.getElementById('js-minutes');
    const sec = document.getElementById('js-seconds');
    min.textContent = minutes;
    sec.textContent = seconds;

    const text = timer.mode === 'pomodoro' ? 'Pomosto' : 'Take a break!';
    document.title = `${minutes}:${seconds} — ${text}`;

    const progress = document.getElementById('js-progress');
    progress.value = timer[timer.mode] * 60 - timer.remainingTime.total;
  }
  

  function switchMode(mode) {
    timer.mode = mode;
    timer.remainingTime = {
      total: timer[mode] * 60,
      minutes: timer[mode],
      seconds: 0,
    };

    document
      .querySelectorAll('button[data-mode]')
      .forEach(e => e.classList.remove('active'));
    document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
    document.body.style.backgroundColor = `var(--${mode})`;
    document
      .getElementById('js-progress')
      .setAttribute('max', timer.remainingTime.total);
    updateClock();
  }

  function handleMode(event) {
    const { mode } = event.target.dataset;
  
    if (!mode) return;
  
    switchMode(mode);
    stopTimer();
  }

  document.addEventListener('DOMContentLoaded', () => {
    switchMode('pomodoro');
  });

試したこと

document.getElementById('btn').style.display = 'none';
で非表示にしておき、休憩時間のタイマーの処理の中に
link.style.display = "block";
で表示することはできました。
しかし、その後、再び作業時間になった時に非表示にしたいのですが、その処理がうまくいかないです。

なにかアドバイスを頂ければと思います、よろしくお願いします。

k_a

2021/11/04 17:36

`うまくいかない`コードを全て記載して下さい

m.ts10806

2021/11/04 21:08

「タイマー」の実装方法は１つではないですし、再現できるコードを提示されないことには何とも言えません。

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

回答1件

ベストアンサー

いまいち状況がわかりませんが

javascript
1<script>
2document.addEventListener('DOMContentLoaded', function() {
3  const time={"sagyo":10*1000,"kyukei":3*1000};
4  let status="sagyo";
5  let timerId;
6  const loop=()=>{
7    const t1=new Date().getTime();
8    document.querySelectorAll('#sagyo,#kyukei').forEach(x=>x.setAttribute("hidden","1"));
9    document.querySelector('#'+status).removeAttribute("hidden");
10    let t0=time[status];
11    timerId=setInterval(()=>{
12      const t2=new Date().getTime();
13      const t3=t0+t1-t2;
14      if(t3<=0){
15        clearInterval(timerId);
16        status=status=="sagyo"?"kyukei":"sagyo";
17        loop();
18      }
19      const h=(parseInt(t3/60/1000)).toString().padStart(2,'0');
20      const m=(parseInt(t3/1000)%60).toString().padStart(2,'0');
21      const ms=(parseInt(t3/10)%100).toString().padStart(2,'0');
22      timer.textContent=`${h}:${m}.${ms}`;
23    },10);
24  }
25  loop();
26});
27</script>
28<div class="timer" id="timer"></div>
29<div id="sagyo">作業中：10秒<br>
30<button class="button" id="button">ボタン</button></div>
31<div id="kyukei">休憩中：3秒</div>