如何在彼此下方运行三个相似的（数字计数器）脚本（仅第一个有效）？答案

【问题标题】：How to run three similar (number counter) scripts beneath each other (Only the first works)?如何在彼此下方运行三个相似的（数字计数器）脚本（仅第一个有效）？
【发布时间】：2022-07-30 19:36:14
【问题描述】：

我想在我的 Wordpress 网站上放置三个数字计数器。

我能够使代码在第一个数字计数器上正常工作，但是当我在下面再添加两个计数器（“counter1”、“counter2”、“conter3”）时，它们没有显示任何数字。

我们将不胜感激！

这一切都很好：

up to <a id="counter1"></a><!-- counts --> times lower cost

<script>
        let counts=setInterval(updated);
        let upto=0;
        function updated(){
            var count= document.getElementById("counter1");
            count.innerHTML=++upto;
            if(upto===1000)
            {
                clearInterval(counts);
            }
        }
    </script>

但这不起作用（只是将上面的代码相乘）：

up to <a id="counter1"></a><!-- counts --> times lower cost

<script>
        let counts=setInterval(updated);
        let upto=0;
        function updated(){
            var count= document.getElementById("counter1");
            count.innerHTML=++upto;
            if(upto===1000)
            {
                clearInterval(counts);
            }
        }
    </script>

up to <a id="counter2"></a><!-- counts --> times better quality

<script>
        let counts=setInterval(updated);
        let upto=0;
        function updated(){
            var count= document.getElementById("counter2");
            count.innerHTML=++upto;
            if(upto===1000)
            {
                clearInterval(counts);
            }
        }
    </script>

up to <a id="counter3"></a><!-- counts --> times less time

<script>
        let counts=setInterval(updated);
        let upto=0;
        function updated(){
            var count= document.getElementById("counter3");
            count.innerHTML=++upto;
            if(upto===1000)
            {
                clearInterval(counts);
            }
        }
    </script>

【问题讨论】：

标签： javascript html

【解决方案1】：

当您在文件中定义<script> 标签时，每个变量都会在它们之间共享！因此，通过更改变量的名称，您可以实现您想要的。

up to <a id="counter1"></a><!-- counts --> times lower cost
<br />
<script>
        let counts1=setInterval(updated);
        let upto1=0;
        function updated(){
            var count= document.getElementById("counter1");
            count.innerHTML=++upto1;
            if(upto1===1000)
            {
                clearInterval(counts1);
            }
        }
    </script>

up to <a id="counter2"></a><!-- counts --> times better quality
<br />
<script>
        let counts2=setInterval(updated);
        let upto2=0;
        function updated(){
            var count= document.getElementById("counter2");
            count.innerHTML=++upto2;
            if(upto2===1000)
            {
                clearInterval(counts2);
            }
        }
    </script>

up to <a id="counter3"></a><!-- counts --> times less time

<script>
        let counts3=setInterval(updated);
        let upto3=0;
        function updated(){
            var count= document.getElementById("counter3");
            count.innerHTML=++upto3;
            if(upto3===1000)
            {
                clearInterval(counts3);
            }
        }
    </script>

【讨论】：