CountUp javascript 显示控制台错误“[CountUp] 目标为空或未定义”

Question

我是 CountUp.js 的新手，想用它来光学计数。

在下面的脚本中（到目前为止我只有这些）您可以看到 CountUp.js 在开始时被链接。 CountUp.js 位于文件夹 "js" 中，该文件夹与具有以下代码的文件位于同一目录中。之后，启动一个 javascript，它定义了 CountUp 的选项。然后启动一个新的 CountUp-Instance，其 ID "num0" 和最终计数值为“150”，最终处理时间为“5”秒。接下来的行仅通过仅在不存在错误时才启动来控制 CountUp 的行为。

问题是：控制台显示出现错误，错误是：[CountUp] target is null or undefined

我检查了多个 google 条目，它们描述了像

这样的错误

javascript
脚本标签的 src 属性错误
选项格式错误

`

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

`

我不知道我做错了什么。如果有人能帮助我，那就太好了。谢谢！

Answer 1

它在包装后对我有用，因此它仅在 DOM 加载后运行。在加载 HTML 元素之前脚本是运行，所以这就是目标为空的原因。您还可以将脚本移动到 HTML 元素下方。

包装它：

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 元素下方

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

CountUp javascript 显示控制台错误“[CountUp] 目标为空或未定义”

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

html

javascript

web-frontend