Question

我一直在尝试将一个简单的秒表添加到我的 Rails 应用程序中，我已经调整了我在此处找到的那个：https://jsfiddle.net/waqasumer/agru2bdL/

代码似乎在控制台中工作（计时器开始和停止），但在使用控件时出现此错误并且 UI 没有显示秒表（它只是读数为零）：

未捕获的类型错误：无法设置 null 的属性“innerHTML”

任何帮助完成这项工作将不胜感激。我在下面包含了我的代码。

  var min = 0;
  var sec = 0;
  var msec = 0;

  var getMin = document.getElementById("min");
  var getSec = document.getElementById("sec");
  var getmsec = document.getElementById("msec");
  var interval;

  function timer() {
      msec++
      getmsec.innerHTML = msec;

      if (msec >= 100) {
          sec++;
          if (sec <= 9) {
              getSec.innerHTML = "0" + sec;
          } else {
              getSec.innerHTML = sec;
          }
          msec = 0;

      } else if (sec >= 60) {
          min++;

          if (min <= 9) {
              getMin.innerHTML = "0" + min;
          } else {
              getMin.innerHTML = min;
          }
          sec = 0;
      }
  }

  function start() {
      interval = setInterval(timer, 10);

      var btn = document.getElementById("start");
      btn.disabled = true;
  }

  function stop() {
      clearInterval(interval);

      var btn = document.getElementById("start");
      btn.disabled = false;
  }

  function reset() {
      min = "00";
      sec = "00";
      msec = "00";

      getMin.innerHTML = min;
      getSec.innerHTML = sec;
      getmsec.innerHTML = msec;

      clearInterval(interval);

  }

  function lapTimer() {
      var Laps = document.getElementById('laps');
      Laps.innerHTML += "<div>" + " " + getMin.innerHTML + ":" + getSec.innerHTML + ":" + getmsec.innerHTML + "</div>";
  }

<h1 class="title">Stopwatch</h1>

<div class="stopwatch">
  <div class="circle">
    <div class="time"><span id="min">00</span>:<span id="sec">00</span>:<span id="msec">00</span></div>
  </div>

  <div class="controls">
    <button id="start" onclick="start()" type="button"><img class="controls-img" id="playButton" src="<%= asset_path( 'play_button.png' ) %>" /></button>
    <button onclick="stop()" type="button"><img class="controls-img" id="pauseButton" src="<%= asset_path( 'pause_button.png' ) %>" /></button>
    <button onclick="lapTimer()" id="lapButton" type="button"><img class="controls-img" id="pauseButton" src="<%= asset_path( 'lap.png' ) %>" /></button>
    <button onclick="reset()" type="button"><img class="controls-img" id="pauseButton" src="<%= asset_path( 'reset_button.png' ) %>" />
    </button>
  </div>
</div>

<br>
<div class="row" id="laps"></div>

Answer 1

js 代码将在页面准备好之前执行。您有 2 个解决方案。将您的 js 代码放在页面末尾或查看此处$(document).ready equivalent without jQuery

JavaScript 秒表（无法设置 null 错误的属性“innerHTML”）

1 个答案: