1

I am using a javascript timer on a page, which redirects the user after a finite time. The code is doing exactly what I want it to but it continues to throw errors in the console. The error message I get is

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;
                };
    };

});

2 Answers 2

2

This happens because this call document.querySelector(".cdtimer") returns null. There are 2 possible reasons:

  1. There are no element with class name cdtimer

  2. You are running your script before DOM loaded

Sign up to request clarification or add additional context in comments.

1 Comment

that helped narrow things down for me. Turns out that although I did have an element of class "cdtimer" the javascript was also working on an iframe within the page that did not contain that element. Thanks for your help.
1

Is your assignment of display actually returning a DOM element? If it can't find anything (typo, perhaps?) it will return null.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.