圖片和計數器不能與多個計數器一起使用

Question

因此，我的HTML頁面上有一個計數器，每次單擊此“重擊”圖像時該計數器都會上升，而單擊“拇指向下”的圖像時，計數器將下降。 最大值為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，您將擁有它。