The timer countdown is encountering an issue where it cannot update the 'textContent' property of a null element

I'm encountering errors with a countdown script that I can't seem to resolve. The error message is generating 1 error every second:

Uncaught TypeError: Cannot set property 'textContent' of null
at (index):181
(anonymous) @ (index):181
setInterval (async)
(anonymous) @ (index):179

This is the code for the timer:

<script type="text/javascript">

var timeleft = 45;
var downloadTimer = setInterval(function(){

timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
document.getElementById("countdowntimer").style.color = "white";

if(timeleft <= 0)
    clearInterval(downloadTimer);
},1000);

</script>
javascripttimerwebcountdown

Answer №1

It seems that your html, as mentioned in the comment, contains an error (</span class="timer">). Additionally, there is room for simplification in the code.

countDownForNOfTicks(5);

function countDownForNOfTicks(nOfTicks) {
  document.querySelector("#countdowntimer").textContent = nOfTicks--;
  // [do more things if necessary]
  if (nOfTicks >= 0) {
    return setTimeout(() => countDownForNOfTicks(nOfTicks), 1000);
  }
  return refresh();
}

function refresh() {
  document.querySelector("div.timer").textContent += " DONE";
}
<div class="timer">Refreshing in 
 <span id="countdowntimer">45</span> seconds
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Set up counters for a variety of Owl Carousel sliders

I am looking to set up multiple owl carousel sliders, where each slider has a counter to track its position. I want the counters to update independently, but I'm running into issues with them not working correctly. Each slider should display a counte ...

javascriptphpjqueryowl-carousel

Assigning properties to the constructor using `this.prop`

Within a React class component, I have multiple methods and the component receives various props. I am contemplating whether I should assign each prop as this.propName in the constructor and then access them using this.propName. For your reference, below ...

javascriptreactjs

Js: Automatically populating data into various input fields

I've encountered an issue with form input value injection using a <script> and POST requests. When I attempt to create another form with the same input field (same name and id), the value injection doesn't work, and troubleshooting has bee ...

javascriptnode.jsexpress

(Javascript) Extracting specific values from JSON objects using a loop

JSON: [ { "id": 1, "name": "One", "value": "Hello 1", "enabled": true, }, { "id": 2, "name": "Two", "value": "Hello 2", "e ...

javascriptnode.jsjson

The issue with the min attribute for number inputs not functioning properly when using decimal

When inputting the value 3 in the field and clicking on submit in the HTML snippet below, Chrome displays an error message stating: Please enter a valid value. The two nearest valid values are 2.0001 and 3.0001. This is confusing because I have set the mi ...

javascripthtml

Is there a difference in performance between using multiple inline scripts versus one combined inline script?

Comparing Multiple Inline Scripts to a Single Conjoined Inline Script: <script type="text/javascript">/* some codeblock 1 */</script> <script type="text/javascript">/* some codeblock 2 */</script> <script type="text/javascript"& ...

javascripthtml

Even after setting the handler to return false, Angular continues to submit the form

In the following scenario, I have encountered an issue: Here is the HTML template snippet: <form [action]='endpoint' method="post" target="my_iframe" #confirmForm (ngSubmit)="submitConfirmation()"> <button type="submit" (click)="conf ...

javascripthtmlangular

Having trouble populating the container with page content using AJAX, PHP, and JS?

Whenever I attempt to use the buttons to change the content, I keep receiving a 'There is no such page!' message. Below is the index.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- ...

javascriptphpjqueryhtmlajax

Share on your Twitter feed

Currently seeking assistance in implementing a function on my website that allows users to post their individual posts to Twitter. For example: Message: "hello world" [twitter] By clicking on the twitter button, the message will be posted along with the p ...

javascripthtmltwitter

Launching the Skeleton feature in NextJS with React integration

I have been working on fetching a set of video links from an Amazon S3 bucket and displaying them in a video player component called HoverVideoPlayer. However, during the loading process, multiple images/videos scale up inside a Tailwind grid component, ca ...

javascriptreactjstypescriptnext.js

Why do the async functions appear to be uncovered branches in the Jest/Istanbul coverage report?

I am encountering an issue throughout my application: When running Jest test coverage script with Istanbul, I am getting a "branch not covered" message specifically on the async function part of my well covered function. What does this message mean and how ...

javascripttypescriptjestjsistanbul

The Angular filter received an undefined value as the second parameter

Currently, I am facing an issue while trying to set up a search feature with a custom filter. It appears that the second parameter being sent to the filter is coming through as undefined. The objects being searched in this scenario are books, each with a g ...

javascriptangularjsfilter

Complicated "as-label" for understanding expressions in Angular

Is it possible to set a complex label in a comprehension expression in Angular? I've searched everywhere for a solution, but I can't seem to find one. The workaround I found involves pre-populating the 'as' label attribute with the des ...

javascriptangularjs

The text/font-weight of the header button is mysteriously shifting without warning

While creating a header for my webpage, I encountered an issue where the text family was changing when the dropdown menu was launched in Safari 8. Curiously, this behavior did not occur when using Chrome to launch the jQuery function. Even after attempting ...

javascriptjqueryhtmlcssfonts

The effectiveness of the module is not meeting the anticipated standards

I successfully integrated a good plugin into my hapi server, and all responses are being logged. However, when I use console.log, console.error, console.warn, and console.info, the logs are only printing as plain text instead of using the good plugin forma ...

javascripthapi.js

The jQuery toggleClass() function is not being applied successfully to content that is dynamically generated from

I've created an awesome collection of CSS-generated cards containing icons and text with a cool animation that expands upon tapping to reveal more icons and options. I carefully crafted the list to look and behave exactly how I wanted it to. But now, ...

javascriptjqueryhtmlcssjson

When attempting to set a JSON array in state, the resulting JavaScript object does not display correctly

As part of my experimentation with fetch APIs in react, I have set up a server that provides dummy data. In the componentDidMount lifecycle hook of my component, I am making a fetch call to retrieve the data. componentDidMount(){ axios.get('http:// ...

javascriptreactjs

Incomplete Json information

As I embark on my journey to learn Javascript and work on building an application simultaneously, I can't help but feel optimistic about the learning process. To guide me through this venture, I've turned to the teachings of Alex MacCaw in his bo ...

javascriptjson

Detect when a user's mouse is hovering over an iframe and escape the iframe accordingly

When the iframe window is visible, there are no issues. However, if the iframe window is set to 0px X 0px in order to hide it while still loading, consider redirecting the iframe or not displaying it at all. In case something is loaded within an iframe or ...

javascriptcssiframe

Mastering Node.js: Writing to a Write Stream on the 'finish' Event

I'm currently using Node.js streams to process a text file line by line, apply some transformations, and then generate an SVG file based on the data. However, I am facing an issue where when I try to write the closing tag (</svg>) after all pro ...

javascriptnode.jsstream