JavaScript stopwatch (Cannot set property 'innerHTML' of null error)

Question

I've been trying to add a simple stopwatch to my Rails app, and I've adapted the one I found here: https://jsfiddle.net/waqasumer/agru2bdL/

The code seems to work in the console (the timer starts and stops), but I'm getting this error when using the controls and the UI is not showing the stopwatch (it's just reading zero):

Uncaught TypeError: Cannot set property 'innerHTML' of null

Any help to get this working would be appreciated. I've included my code below.

  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>

Possibly your script is looking for the element before it exists. — Spangle, Jan 21 '21 at 06:15
Not able to reproduce the error. Can you use the code editor and show the error? — sourav satyam, Jan 21 '21 at 06:22

score 1 · Accepted Answer · answered Jan 21 '21 at 06:31

1

The js code will executed, before the page is ready. You have 2 solutions. Put your js code at the end of the page or look here $(document).ready equivalent without jQuery

answered Jan 21 '21 at 06:31

Nessiahs

26
1
1

Welcome to StackOverflow. While this explanation may solve the question, including a sample code of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. I suggest you to edit your answer to add some code example, Have a look here → [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) Thanks! – Federico Baù Jan 21 '21 at 07:44

JavaScript stopwatch (Cannot set property 'innerHTML' of null error)

1 Answers1