gpt4 book ai didi

javascript - CountUp javascript 显示控制台错误 "[CountUp] target is null or undefined"

转载 作者:行者123 更新时间:2023-11-28 02:28:10 44 4
gpt4 key购买 nike

我是 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-Attribute 错误
  • 选项格式错误

`

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

`

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

最佳答案

它在包装后对我有用,因此它仅在加载 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>

关于javascript - CountUp javascript 显示控制台错误 "[CountUp] target is null or undefined",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52645342/

44 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com