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中使用的ID错误
脚本标记的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元素之前运行，因此这就是目标为null的原因。您也可以将脚本移动到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);

元素下方的

<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]目标为空或未定义”

1 个答案: