javascript - 为什么我的按钮无法触发计时器？

Question

我找到了一个非常简单的 Javascript 示例来了解时间跟踪器的工作原理。我几个小时以来一直在比较代码，但无法运行。时钟更新正常，但按钮未触发时间跟踪器。

我的错误在哪里？

下面是示例 JS 代码。时钟根据定义的“setInterval()”定期更新。我只是找不到按下按钮后触发时钟启动的错误。

$(function() {
  registerClock();
  setTime();
});

var currentdate;
var stopWatchRunning = false;
var startTime;

function registerClock() {
  setInterval(updateClock, 250);
}

function updateClock() {
  setTime();
  setStopWatch();
}



function setTime() {
  currentdate = new Date();
  var datetime = +currentdate.getDate() + "." +
    (currentdate.getMonth() + 1) + "." +
    currentdate.getFullYear() + " " +
    currentdate.getHours() + ":" +
    currentdate.getMinutes() + ":" +
    currentdate.getSeconds();
  $("#time").text(datetime);
}


$("#startstop").click(function() {
  if (stopWatchRunning == false) {
    startTime = new Date();
    stopWatchRunning = true;
  } else {
    stopWatchRunning = false;
  }
});


function setStopWatch() {
  if (stopWatchRunning == false) {
    return;
  }
  var timeElapsed = currentdate - startTime;
  var duration = new Date(timeElapsed);
  var showDuration = duration.getHours() - 1 + ":" +
    duration.getMinutes() + ":" +
    duration.getSeconds();
  $("#tracker").text(showDuration);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/timer_neu.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Stoppuhr</a>
    </div>
  </div>
</nav>
<div class="row">
  <div class="col-md-5">
    <h1>Uhrzeit</h1>
    <h1 id="time">19:53:00</h1>
  </div>

  <div class="col-md-5">
    <h1>Stoppuhr</h1>
    <h1 id="tracker">00:00:00</h1>
  </div>

  <div class="col-md-2">
    <p><button id="startstop" class="btn btn-default">Start/Stop</button></p>
    <div>
    </div>

Answer 1

将 $("#startstop") 点击函数移至文档就绪函数内，如下所示

$(function() {
  registerClock();
  setTime();

  $("#startstop").click(function() {
    //alert('change')
  if (stopWatchRunning == false) {
      startTime = new Date();
      stopWatchRunning = true;
    } else {
      stopWatchRunning = false;
    }
  });
});