Issue with countdown timer when making modifications on my website utilizing Angular and TypeScript

Question

Issue with countdown timer when making modifications on my website utilizing Angular and TypeScript

I implemented a countdown timer in typescript on the homepage of my website. However, when I navigate to another page, I encounter a console error every second.

.TS

countDown() {
    var countDownDate = new Date("Jan 1, 2022 00:00:00").getTime();

    // Update the count down every 1 second
    var x = setInterval(function () {
      var now = new Date().getTime();

      // Find the distance between now an the count down date
      var distance = countDownDate - now;

      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // Display the result in an element with id="demo"
      var contadorElement =  document.getElementById("contador") as HTMLElement; // <- Line 37
      contadorElement.innerHTML = days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ";

      if (distance < 0) {
        clearInterval(x);
        contadorElement.innerHTML = "EXPIRED";
      }
    }, 1000);
  }

.HTML

<p id="contador" style="font-size:30px"></p>

The code functions properly under 'localhost:4200/', however, if I visit 'localhost:4200/anotherStuff' (for example), I receive a console error each second:

core.js:6456 ERROR TypeError: Cannot set properties of null (setting 'innerHTML')
at home.component.ts:37
at timer (zone.js:2561)
at ZoneDelegate.invokeTask (zone.js:406)
at Object.onInvokeTask (core.js:28661)
at ZoneDelegate.invokeTask (zone.js:405)
at Zone.runTask (zone.js:178)
at invokeTask (zone.js:487)
at ZoneTask.invoke (zone.js:476)
at data.args.<computed> (zone.js:2541)

Any insights or suggestions?

javascript angular typescript

Answer 1

Answer №1

When the content of your page is altered, the section of the DOM where your contador element is located gets removed. If you do not properly handle your setInterval in the ngOnDestroy hook, your code will continue to run even after navigating away (when your component is destroyed). This can result in an error such as

cannot read undefined of contadorElement (reading: innerHTML)

or something along those lines.

The solution is straightforward: make sure to clean up your setInterval by calling clearInterval within the ngOnDestroy hook, using the return value from your setInterval as the argument.

private interval;

countDown() {
   this.interval = setTimeout(() => { /* Code omitted for clarity */}, 1000);
}

ngOnDestroy() {
   clearInterval(this.interval);
}

If you are already clearing the interval when it reaches 0, consider refining the process by setting the variable to undefined or null after clearing the interval and triggering clearInterval only if it has not been stopped before.

private interval;

countDown() {
   this.interval = setTimeout(() => { 
      /* Code omitted for clarity */
      
      if (distance < 0) {
        this.stopInterval();
        contadorElement.innerHTML = "EXPIRED";
      }
   }, 1000);
}

ngOnDestroy() {
   clearInterval(this.interval);
}

private stopInterval() {
   if (this.interval) {
      clearInterval(this.interval);
      this.interval = null;
   }
}

If stopping the timer in ngOnDestroy is not feasible (for instance, if your code is part of a service and you prefer not to call a stopCountDown method in

ngOnDestroy</code), you will need to check if the element still exists in each setInterval loop and potentially terminate the interval if it no longer exists.</p>
<pre class="lang-js"><code>countDown() {

    // Update the count down every 1 second
    var x = setInterval(function () {
      /* Code omitted for clarity */
       
      var contadorElement =  document.getElementById("contador") as HTMLElement; 

      if (contadorElement) {
         contadorElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
      } else {
         clearInterval(x);
      }

      if (distance < 0) {
        clearInterval(x);
        contadorElement.innerHTML = "EXPIRED";
      }
    }, 1000);
  }

Answer 2

When the content of your page is altered, the section of the DOM where your contador element is located gets removed. If you do not properly handle your setInterval in the ngOnDestroy hook, your code will continue to run even after navigating away (when your component is destroyed). This can result in an error such as

cannot read undefined of contadorElement (reading: innerHTML)

or something along those lines.

The solution is straightforward: make sure to clean up your setInterval by calling clearInterval within the ngOnDestroy hook, using the return value from your setInterval as the argument.

private interval;

countDown() {
   this.interval = setTimeout(() => { /* Code omitted for clarity */}, 1000);
}

ngOnDestroy() {
   clearInterval(this.interval);
}

If you are already clearing the interval when it reaches 0, consider refining the process by setting the variable to undefined or null after clearing the interval and triggering clearInterval only if it has not been stopped before.

private interval;

countDown() {
   this.interval = setTimeout(() => { 
      /* Code omitted for clarity */
      
      if (distance < 0) {
        this.stopInterval();
        contadorElement.innerHTML = "EXPIRED";
      }
   }, 1000);
}

ngOnDestroy() {
   clearInterval(this.interval);
}

private stopInterval() {
   if (this.interval) {
      clearInterval(this.interval);
      this.interval = null;
   }
}

If stopping the timer in ngOnDestroy is not feasible (for instance, if your code is part of a service and you prefer not to call a stopCountDown method in

ngOnDestroy</code), you will need to check if the element still exists in each setInterval loop and potentially terminate the interval if it no longer exists.</p>
<pre class="lang-js"><code>countDown() {

    // Update the count down every 1 second
    var x = setInterval(function () {
      /* Code omitted for clarity */
       
      var contadorElement =  document.getElementById("contador") as HTMLElement; 

      if (contadorElement) {
         contadorElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
      } else {
         clearInterval(x);
      }

      if (distance < 0) {
        clearInterval(x);
        contadorElement.innerHTML = "EXPIRED";
      }
    }, 1000);
  }

Issue with countdown timer when making modifications on my website utilizing Angular and TypeScript

Answer №1

Similar questions

Is it possible to enhance the configurations within angular.json?

Tips for identifying incognito mode and launching a fresh tab within an already open incognito window

What is the best way to eliminate a specific item from an array of objects within a function?

Creating a custom pipe that converts seconds to hours and minutes retrieved from an API can be achieved by implementing a transformation function

What is the best way to retrieve data from the server using Props in React Router and Redux?

Encountering a CouchDB 401 Unauthorized Error

Store the label's value as a JSON object in JavaScript

Javascript error in formatting

Is there a way to incorporate a responsive side menu using JQuery or CSS3 that can shift the entire page layout?

What is the best way to send an email with a randomly generated HTML output using a <button>?

Node.js module mishap

Retrieve the scrolling height in Vue.js 2 window

I'm curious about the significance of this in Angular. Can you clarify what type of data this is referring

What causes variations in the output of getClientRects() for identical code snippets?

If the status of any ticket with is_approved=1 is updated to "2", the field ticket_status will be updated based on the order ID in CodeIgniter

I'm having trouble displaying the result of my calculation in the code. Could it be because I forgot to include an output tag?

Display nested components without the need for a parent container element - Divide SVG elements into individual components

With the latest Facebook Graph API integration, we are encountering issues where AJAX calls are returning empty values

Is there a more efficient method for translating arrays between JavaScript and PHP?

Struggling to make the upvoting feature function properly in the Thinkster MEAN Stack Tutorial