未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39; null

Question

我正在为Freecodecamp制作一个番茄钟。每次我执行具有指定值的代码时，我都不会遇到任何问题。但是，当我尝试通过现场演示站点的界面修改倒计时的值时，值被修改但由于某种原因我无法像以前那样在演示站点上看到结果，如果不是我遇到以下问题： ＆＃34;未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39; of null＆＃34;。

Javascript：

＆＃13;

＆＃13;

function myfunction() {

       
    
      countdown((sessionTime * 60000) + Number(new Date()), ['hours','minutes', 'seconds'], function () {
        
        console.log('finished!');
        
      });
  
}


function lessBreakTime() {
  
  if(status == 0) {
    // Initial break time value.
    x = document.getElementById("breakTimeValue").innerHTML;
    // Substract break time with click.
    x -= 1;
    // Set the new break time if the timer has not reached -1.
    if (x >= 0) {
      document.getElementById("breakTimeValue").innerHTML = x;
      // Update break time value.
      breakTime = x;
    }
    
  } 
  
}

function moreBreakTime() {
  if(status == 0) {
    // Initial break time value.
    x = document.getElementById("breakTimeValue").innerHTML;
    // Get the string break value and set it as a numeric value.
    z = Number(x);
    // Add time to break
    z += 1;
    // Set the new break time value
    document.getElementById("breakTimeValue").innerHTML = z;
    // Update break time value.
    breakTime = z;
  }
}

function lessSessionTime() {
  if(status == 0) {
  // Inital session time value.
  x = document.getElementById("sessionTimeValue").innerHTML;
  // Substract one unit from the session time's value.
  x -= 1;
  // Set new session time if value is greater or equal zero.
    if (x >= 0) {
      document.getElementById("sessionTimeValue").innerHTML = x;
      // Update session time value.
      sessionTime = x;
      // Set timer value equal to session time.
      document.getElementById("time").innerHTML = x;
    }
  }
}

function moreSessionTime() {
  if(status == 0) {
    // Initial session time value.
    x = document.getElementById("sessionTimeValue").innerHTML;
    // Get the string session value and set it as a numeric value.
    z = Number(x);
    // Add time to break
    z += 1;
    // Set the new break time value
    document.getElementById("sessionTimeValue").innerHTML = z;
    // Update session time value.
    sessionTime = Number(z);
    // Set timer value equal to session time.
    document.getElementById("time").innerHTML = z;
    }
  
}

function checkStatus () {
  
  if(status == 0) {
    status = 1;
  } else {
    status = 0;
  }
}

var sessionTime = 30;
var breakTime = 5;
var status = 0;


var countdown = function (end, elements, callback) {
    var _second = 1000,
        _minute = _second * 60,
        _hour   = _minute * 60,
        _day    = _hour * 24,
        
        end = new Date(end),
        timer, 
        
        calculate = function () {
            
            var now = new Date(),
                remaining = end.getTime() - now.getTime(),
                data;
            
            if(isNaN(end)) {
                console.log('Invalid date/time');
                return;
            }
            
            if(remaining <= 0) {
            
                clearInterval(timer);
                
                if(typeof callback === 'function') {
                    callback();
                } 
            
            } else {
            
                if(!timer) {
                    timer = setInterval(calculate, _second);
                }
                
                    data = {
                    'days': Math.floor(remaining / _day),
                    'hours': Math.floor((remaining % _day) / _hour),
                    'minutes': Math.floor((remaining % _hour) / _minute),
                    'seconds': Math.floor((remaining % _minute) / _second)
                    }       
            
                    if(elements.length) {

                        for(x in elements) {

                            var x = elements[x];
                            data[x] = ('00' + data[x]).slice(-2);
                            document.getElementById(x).innerHTML = data[x];

                        }
            
                    }
                
            }
                        
        };
    
    calculate();

}

＆＃13;

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Hind:400,300' rel='stylesheet' type='text/css'>

<div id="wrapper">
  <h1 id="title" onclick="countdown()">Calvi's Pomodore Timer<h1>
 
    <div id="widgets">
      
      <div id="breakTime">
        
        <p>BREAK LENGTH</p>
        <div class="break"></div>
        <p class="minus" onclick="lessBreakTime()">-</p>
        <div id="sessionTimerDiv">
          <p id="breakTimeValue">5</p>
        </div>
        <p class="plus" onclick="moreBreakTime()">+</p>
        
      </div>
      
      <div id="sessionTime">  
       
        <p>SESSION TIME</p>
        <div class="break"></div>
        <p class="minus" onclick="lessSessionTime()">-</p>
        <div id="sessionTimerDiv">
          <p id="sessionTimeValue">25</p>
        </div>
        <p class="plus" onclick="moreSessionTime()">+</p>
        
      </div>
      
      <div id="timer">
        
        <div id="timerWatch" onclick="checkStatus(); myfunction()">
          <h3 id="status">Session<h3>
            <h4 id="time"><span id="hours"></span> <span id ="minutes"></span> <span id="seconds"></span></h4>
        </div>
        
      </div>
      
    </div>
    
</div>

＆＃13;

＆＃13;

＆＃13;