CountUp javascript displays console error "[CountUp] target is null or undefined"

Question

I'm new to CountUp.js and want to use it to optically count up a number.

In the following script (thats all I have till now) your can see the CountUp.js getting linked at the beginning. The CountUp.js is located in the folder "js", which is in the same directory as the file with the following code. After that, a javascript is started, which defines the options for the CountUp. Then a new CountUp-Instance is started, which has the ID "num0" and the final count-value of "150" at a final processing time of "5" seconds. The line that follows simply controls CountUp's behaviour by only starting if no error exists.

And here is the problem: The console says, that there is an error and the error is: [CountUp] target is null or undefined

I checked multiple google-entries, which describe bugs like

Wrong ID used in the javascript
Wrong src-Attribute of the script-tag
Wrong options-format

`

<html>
  <head>
    <script src="./js/countup.js" type="text/javascript"></script>
    <script>
      var options = {
        useEasing: true, 
        useGrouping: true, 
        separator: ',', 
        decimal: '.', 
      };
      var demo0 = new CountUp('num0', 0, 150, 0, 5, options);
      if(!demo0.error){demo0.start();}else{console.error(demo0.error);}
    </script>
  </head>
  <body>
    <span id="num0">0</span>
  </body>
</html>

`

I don't know what I'm doing wrong. It would be very nice if anyone could help me. Thank you!

@tobifasc I already tested this and it didn't helped :( . Thanks anyways! — IceTechDev, Oct 04 '18 at 11:23
It works for me. Where exactly did you put the second script element? And did the error message stay the same? — tobifasc, Oct 04 '18 at 11:26
@tobifasc I put the second script element after the closing body tag. It didn't helped and the error message was the same. By the way, I tested it with cleaned browser cache and also in Incognito mode, this doesn't helped either, just to be sure there is nothing browser-related. In which browser did you test it? — IceTechDev, Oct 04 '18 at 11:37
@tobifasc I tested it also outside from the body element and it worked with the new code :) . So the main problem is loading the script before the html. — IceTechDev, Oct 04 '18 at 11:45

James Pooley · Accepted Answer · 2018-10-04T11:48:19.577

0

It worked for me after wrapping it so that it runs only after the DOM is loaded. The script was running before the HTML element was loaded, so that is why the target was null. You could also move the script below the HTML element.

Wrap it:

document.addEventListener('DOMContentLoaded', function() {
var options = {
    useEasing: true,
    useGrouping: true,
    separator: ',',
    decimal: '.',
};
var demo0 = new CountUp('num0', 0, 150, 0, 5, options);
if (!demo0.error) {
    demo0.start();
} else {
    console.error(demo0.error);
}}, false);

OR below the element

<html>
  <head>
    <script src="./js/countup.js" type="text/javascript"></script>
  </head>
  <body>
    <span id="num0">0</span>
    <script>
      var options = {
        useEasing: true, 
        useGrouping: true, 
        separator: ',', 
        decimal: '.', 
      };
      var demo0 = new CountUp('num0', 0, 150, 0, 5, options);
      if(!demo0.error){demo0.start();}else{console.error(demo0.error);}
    </script>
  </body>
</html>

edited Oct 04 '18 at 11:48

answered Oct 04 '18 at 11:33

James Pooley

607
4
17

Thank you very very much! Now it works without any problems. I would be interested in why this happens, can I change something in the semantic so that this doesn't happen anymore? – IceTechDev Oct 04 '18 at 11:40
A common practice is to include your inline script at the bottom of the page, so that it is reached last. When you code is reached, it begins executing. Since it began executing before that span tag was loaded, it could not find the span tag hence the target was null. As long as you keep your script at the bottom, you will usually be fine and avoid this problem. If your code depends on a third party library that needs to load, that is another reason to wrap your code so that it does not execute until the page is fully loaded. – James Pooley Oct 04 '18 at 11:45
1

Maybe this answer also helps with understanding the issue: [https://stackoverflow.com/a/2920207](https://stackoverflow.com/a/2920207) – tobifasc Oct 04 '18 at 11:47
Wow, that's just genius. Thanks very much, learned something new today ^^ . – IceTechDev Oct 04 '18 at 11:48
@tobifasc Oh thanks, that's nice, I will read it in a moment ^^ . It just seemed to me like something so basic, that I weren't aware of it anymore. – IceTechDev Oct 04 '18 at 11:52

CountUp javascript displays console error "[CountUp] target is null or undefined"

1 Answers1