为什么我要在重置秒表后再次播放秒表时单击两次？

Question

我尝试从 freecodecamp 教程构建秒表，当我添加功能来重置它时，我意识到我应该在重置后单击两次才能播放..有任何答案或解决方案吗？顺便说一句，这是我的第一个问题，我绝对是初学者。

我尝试从其他问题和chatGPT中找到解决方案，但不起作用..这是我的代码：

start.addEventListener('click', function() {
  if (timerStatus === 'stopped') {
    timerInterval = window.setInterval(stopwatch, 1000);
    document.getElementById('start').innerHTML = `<i id="play">Pause</i>`;

    timerStatus = 'started';
  } else if (timerStatus === 'started') {
    window.clearInterval(timerInterval);
    document.getElementById('start').innerHTML = `<i id="play">Play</i>`;

    timerStatus = 'paused';
  } else if (timerStatus === 'paused') {
    timerInterval = window.setInterval(stopwatch, 1000);
    document.getElementById('start').innerHTML = `<i id="play">Pause</i>`;

    timerStatus = 'started';
  }
});


reset.addEventListener('click', function() {

  window.clearInterval(timerInterval);
  seconds = 0;
  minutes = 0;
  hours = 0;
  document.getElementById('start').innerHTML = `<i id="play" >Play</i>`;
  document.getElementById('timer').innerHTML = "00:00:00"
})

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

<div class="container">

  <div id="timer">
    00:00:00
  </div>

  <div class="buttons">
    <button id="start">
      <i class="fa-solid fa-play" id="play">Play</i>
    </button>
    <button id="reset">
      <i class="fa-solid fa-arrow-rotate-left" id="reset2">Reset</i>
    </button>
  </div>
</div>

Answer 1

问题很简单，因为当您单击重置按钮时，您没有将

timerStatus

重置回

stopped

。

另请注意，您可以进行一些改进，例如选择 DOM 中的元素一次并将它们存储在可以重复使用的变量中，将

textContent

设置为仅更新节点而不是

innerHTML

来重写整个 HTML。

以下是一个简化的工作示例，因为问题中未提供

stopWatch

方法的内容。

let timerInterval;
let timerStatus = 'stopped';
const timer = document.querySelector('#timer');
const start = document.querySelector('#start');
const reset = document.querySelector('#reset');
const play = document.querySelector('#play');

const stopwatch = () => console.log('foo');

start.addEventListener('click', function() {
  if (timerStatus === 'stopped') {
    timerInterval = window.setInterval(stopwatch, 1000);
    play.textContent = 'Pause';
    timerStatus = 'started';
  } else if (timerStatus === 'started') {
    window.clearInterval(timerInterval);
    play.textContent = 'Play';
    timerStatus = 'paused';
  } else if (timerStatus === 'paused') {
    timerInterval = window.setInterval(stopwatch, 1000);
    play.textContent = 'Pause';
    timerStatus = 'started';
  }
});

reset.addEventListener('click', function() {
  window.clearInterval(timerInterval);
  seconds = minutes = hours = 0;
  play.textContent = 'Play';
  timer.textContent = "00:00:00";
  timerStatus = 'stopped';
})

<div class="container">
  <div id="timer">00:00:00</div>
  <div class="buttons">
    <button id="start">
      <i class="fa-solid fa-play" id="play">Play</i>
    </button>
    <button id="reset">
      <i class="fa-solid fa-arrow-rotate-left" id="reset">Reset</i>
    </button>
  </div>
</div>