Question

所以我在我的HTML页面上有这个计数器，每当这个计数器重新上升时，它就会出现。点击图片，当＆＃39;拇指向下＆＃39;点击图像，计数器下降。最大值为10.这很好。像这样：的 HTML

   <img src="images/thumb-up.png" onclick="CountUp1();" id="votingup1" />
   <span id="counter1">0</span>
   <img src="images/thumb-down-dark.png" onclick="CountDown1();" id="votingdown1" />

的JavaScript

<script type="text/javascript">
     var minVal = 0, maxVal = 10, clicks = 0,
  display = document.getElementById("counter1");

     function CountUp1() {
         clicks = Math.min(maxVal, clicks + 1);
         display.innerHTML = clicks;
     }

     function CountDown1() {
         clicks = Math.max(minVal, clicks - 1);
         display.innerHTML = clicks;
     }
     </script>

这很好用！

然后我尝试添加这个投票系统的另一部分。显然有不同的功能名称和图像和计数器的不同id。像这样。

 <script type="text/javascript">
     var minVal = 0, maxVal = 10, clicks = 0,
     display = document.getElementById("counter2");

     function CountUp2() {
         clicks = Math.min(maxVal, clicks + 1);
         display.innerHTML = clicks;
     }

     function CountDown2() {
         clicks = Math.max(minVal, clicks - 1);
         display.innerHTML = clicks;
     }

</script>

但那并没有奏效。如果我点击第一个竖起大拇指，第二个计数器增加。我确实在一个脚本中有这个，但它没有工作，所以我把它们放在像上面这样的单独的脚本标签中。我也试过调用不同的变量，例如

`<script type="text/javascript">
         var minVal2 = 0, maxVal2 = 10, clicks2 = 0,
         display = document.getElementById("counter2");

         function CountUp2() {
             clicks2 = Math.min(maxVal2, clicks2 + 1);
             display.innerHTML = clicks2;
         }

         function CountDown2() {
             clicks2 = Math.max(minVal2, clicks2 - 1);
             display.innerHTML = clicks2;
         }

    </script> `

但这似乎也无济于事。我有点卡住了。谁能帮忙。感谢

编辑：第二个html如下：

 <img src="images/thumb-up.png" onclick="CountUp2();" id="votingup2" />
 <span id="counter2">0</span>
 <img src="images/thumb-down.png" onclick="CountDown2();" id="votingdown2" />

Answer 1

您必须将display = document.getElementById("counter2");移动到每个功能中显示的分配是在页面加载时完成的，在两个脚本部分或单个部分中都不重要。

display = document.getElementById("counter1");
display = document.getElementById("counter2"); // overrides global

显示变量，如：

<script type="text/javascript">
     var minVal2 = 0, maxVal2 = 10, clicks2 = 0,


     function CountUp2() {
         clicks2 = Math.min(maxVal2, clicks2 + 1);
         var display = document.getElementById("counter2");
         display.innerHTML = clicks2;
     }

     function CountDown2() {
         clicks2 = Math.max(minVal2, clicks2 - 1);
         var display = document.getElementById("counter2");
         display.innerHTML = clicks2;
     }

</script> `

或在第二个计数器上使用display2代替display。

Answer 2

那是因为这些行：

var minVal = 0, maxVal = 10, clicks = 0,
display = document.getElementById("counter1");

还有：

var minVal = 0, maxVal = 10, clicks = 0,
display = document.getElementById("counter2");

在函数之外，因此是全局的...因此它们会相互覆盖。也许只有一个版本的每个CountUp（）和CountDown（），但允许一个参数指定计数器的数量。

编辑：如果您还将显示变量更改为display1和display2，我认为您可以使用它。

图像和计数器不能与多个计数器一起使用

2 个答案: