JavaScript 计时器：代码工作未捕获类型错误

Question

我在页面上使用 javascript 计时器，它会在有限的时间后重定向用户。该代码完全符合我的要求，但它继续在控制台中抛出错误。我收到的错误消息是

Uncaught TypeError: Cannot set property 'textContent' of null

 //Countdown Timer

function CountDownTimer(duration, granularity) {
      this.duration = duration;
      this.granularity = granularity || 1000;
      this.tickFtns = [];
      this.running = false;
    }

    CountDownTimer.prototype.start = function() {
      if (this.running) {
        return;
      }
      this.running = true;
      var start = Date.now(),
          that = this,
          diff, obj;

      (function timer() {
        diff = that.duration - (((Date.now() - start) / 1000) | 0);

        if (diff > 0) {
          setTimeout(timer, that.granularity);
        } else {
          diff = 0;
          that.running = false;
        }

        obj = CountDownTimer.parse(diff);
        that.tickFtns.forEach(function(ftn) {
          ftn.call(this, obj.minutes, obj.seconds);
        }, that);
      }());
    };

    CountDownTimer.prototype.onTick = function(ftn) {
      if (typeof ftn === 'function') {
        this.tickFtns.push(ftn);
      }
      return this;
    };

    CountDownTimer.prototype.expired = function() {
      return !this.running;
    };

    CountDownTimer.parse = function(seconds) {
      return {
        'minutes': (seconds / 60) | 0,
        'seconds': (seconds % 60) | 0
      };
    };

    window.onload = function() {

        var display = document.querySelector(".cdtimer"),
            s6timer = new CountDownTimer(20);

            s6timer.onTick(format).onTick(redirect).start();

            function redirect() {
                if (s6timer.expired()) {
                    window.location.replace("../assessmentportal/sectiontimeout.php");
                    }
                  };

                function format(minutes, seconds) {
                    minutes = minutes < 10 ? "0" + minutes : minutes;
                    seconds = seconds < 10 ? "0" + seconds : seconds;
                    display.textContent = minutes + ':' + seconds;
                };
    };

});

Answer 1

发生这种情况是因为此调用 document.querySelector(".cdtimer") returns null。有两个可能的原因：

没有名称为 class 的元素 cdtimer
你是运行你的脚本之前DOM加载

Answer 2

您对 display 的赋值实际上 return 是 DOM 元素吗？如果它找不到任何东西（也许是打字错误？），它将 return null.

JavaScript 计时器：代码工作未捕获类型错误

JavaScript Timer: Code Working Uncaught TypeError

javascript

typeerror