Javascript 如何在html中设置多个数字的动画？

我正在尝试用html制作数字动画。但不知何故，我不能同时制作多个数字的动画。如何设置多个数字的动画？问题是第二个数字应该是空的。。。但是我不明白为什么第二个动画是空白的：c

下面是它现在的屏幕截图。第一个动画有效，但第二个动画无效。“？”是第二个动画应该出现的位置

HTML:

JS:

函数animateValue（对象、开始、结束、持续时间）{
让startTimestamp=null；
常量步骤=（时间戳）=>{
如果（！startTimestamp）startTimestamp=时间戳；
const progress=Math.min（（时间戳-startTimestamp）/持续时间，1）；
obj.innerHTML=Math.floor（进度*（结束-开始）+开始）；
如果（进度<1）{
window.requestAnimationFrame（步骤）；
}
};
window.requestAnimationFrame（步骤）；
}
const obj=document.getElementById（“值”）；
animateValue（obj，0,5500）；
函数animateValue（对象、开始、结束、持续时间）{
让startTimestamp=null；
常量步骤=（时间戳）=>{
如果（！startTimestamp）startTimestamp=时间戳；
const progress=Math.min（（时间戳-startTimestamp）/持续时间，1）；
obj.innerHTML=Math.floor（进度*（结束-开始）+开始）；
如果（进度<1）{
window.requestAnimationFrame（步骤）；
}
};
window.requestAnimationFrame（步骤）；
}
const obj=document.getElementById（“事件”）；
animateValue（obj，0,5500）；

您正在全局范围内定义两个同名的函数

animateValue

。一个会影响另一个。是的，我同意@RuudHelderman，但这可能只是因为你在帖子上意外地复制了两次。那么我到底要做什么呢？@ancxFlat因为两个函数定义是相同的，所以只需删除其中一个。一个更大的问题可能是全局变量obj的重新定义；这给了我一个Chrome的语法错误。测试时请注意JavaScript控制台！重命名其中一个变量，或者更好地避免使用全局变量。

 <section id="gamemodes">
    <h1>ABOUT US</h1>
    <p>Here you can view more about us.</p>

    <div class="row fixed-width">
        <div class="col-md mode">


            <h2>ABOUT X10 GAMING</h2>
            <p><strong><div id="value"> </div> Members</p></strong><br>

            <p><strong><div id="events"> </div> Events</p></strong>
        </div>

        

        <div class="col-md img">
            <img class="res-img" src="img/ueberuns.png">
        </div>

    </div>
 

</section>

#value {
    display: inline;
}

#events {
    display: inline;
}

<script>
        function animateValue(obj, start, end, duration) {
            let startTimestamp = null;
            const step = (timestamp) => {
                if (!startTimestamp) startTimestamp = timestamp;
                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                obj.innerHTML = Math.floor(progress * (end - start) + start);
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            };
            window.requestAnimationFrame(step);
        }

        const obj = document.getElementById("value"); 
        animateValue(obj, 0, 5, 500);

        
    </script>

<script>
    function animateValue(obj, start, end, duration) {
        let startTimestamp = null;
        const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
            obj.innerHTML = Math.floor(progress * (end - start) + start);
            if (progress < 1) {
                window.requestAnimationFrame(step);
            }
        };
        window.requestAnimationFrame(step);
    }

    const obj = document.getElementById("events"); 
    animateValue(obj, 0, 5, 500);

    
</script>