javascript - JavaScript 秒表（无法设置属性 'innerHTML' of null 错误）

问题描述

我一直在尝试向我的 Rails 应用程序添加一个简单的秒表，并且我已经修改了我在这里找到的那个：https ://jsfiddle.net/waqasumer/agru2bdL/

该代码似乎在控制台中工作（计时器启动和停止），但我在使用控件时遇到此错误，并且 UI 没有显示秒表（它只是读取零）：

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

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

  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>

标签： javascriptruby-on-rails

javascript - JavaScript 秒表（无法设置属性 'innerHTML' of null 错误）

问题描述

解决方案

推荐阅读