画像とカウンタが複数のカウンタで動作しない

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> 

しかし、これはうまくいかなかった。私が最初のもので親指をクリックすると、2番目のカウンターが増加しました。私はこれを1つのスクリプトで持っていましたが、それではうまくいきませんでしたので、私はそれらを上のような別々のスクリプトタグに入れました。私もさまざまな変数を呼び出すことを試みたので、例えば

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

しかし、それはどちらかと思われません。私はちょっと立ち往生している。誰も助けることができます。おかげ

編集：

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

も：これらの行があるためだこと

<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");を移動する必要があります。 表示の割り当てはページの読み込みで行われ、2つのスクリプトセクションや1つのセクションでは関係ありません。

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

：第二のhtmlが続くようである

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

は、機能の外にあるため、彼らはお互いを上書きします。おそらく、各CountUp（）とCountDown（）のバージョンは1つだけですが、カウンターの番号を指定するパラメーターを使用できます。

編集：表示変数をdisplay1とdisplay2に変更していたとします。