Bild und Zähler funktioniert nicht mit mehr als einem Zähler

Question

So habe ich diesen Zähler auf meiner HTML-Seite, die jedes Mal hochgeht, wenn dieses "Thump Up" -Bild angeklickt wird, und wenn das "Thumbs Down" -Bild angeklickt wird Nieder. Max-Wert ist 10. Das funktioniert gut. Wie folgt aus: 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> 

Und das funktioniert gut!

Also habe ich versucht, einen weiteren Abschnitt dieses Wahlsystems hinzuzufügen. Haben verschiedene Funktionsnamen offensichtlich und unterschiedliche IDs für die Bilder und den Zähler. So was.

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

Aber das hat nicht funktioniert. Wenn ich auf den ersten Daumen klicke, erhöht sich der zweite Zähler. Ich hatte dies in einem Skript, aber es hat nicht funktioniert, dann habe ich sie in separate Skript-Tags wie oben beschrieben. Ich habe auch versucht, die verschiedenen Variablen aufzurufen, so zum Beispiel

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

aber das scheint auch nicht zu funktionieren. Ich bin ein bisschen fest. Kann jemand helfen. Dank

edit: die zweite html ist wie folgt:

<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

Sie müssen display = document.getElementById("counter2"); in jede Funktion verschieben Die Zuordnung der Anzeige erfolgt beim Laden der Seite, spielt keine Rolle in zwei Skriptabschnitten oder in einem einzigen.

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

Anzeigevariable, wie:

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

Nutzen display2 anstelle von display auf dem zweiten Zähler.

Answer 2

Das ist, weil diese Zeilen:

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

Und auch:

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

außerhalb der Funktionen sind und somit global .. so überschreiben sie sich gegenseitig. Vielleicht haben Sie nur eine Version von CountUp() und CountDown(), aber erlauben einen Parameter, der die Nummer des Zählers angibt.

Edit: Ich denke, Sie hätten es gehabt, wenn Sie auch die Anzeigevariable auf display1 und display2 geändert hätten.