Image and counter not working with more than one counter

Question

So I have this counter on my HTML page that goes up every time this 'thumps up' image is clicked, and when the 'thumbs down' image is clicked, the counter goes down. Max value is 10. This works fine. Like this: 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>

And that works fine!

So then I tried adding another section of this voting system. Have different function names obviously and different id's for the images and counter. Like this.

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

But that didn't work. If I click thumbs up on the first one, the second counter increased. I did have this in one script, but it didnt work so then I put them in seperate script tags like above. I also tried calling the different variables, so for example

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

but that doesn't seem to work either. I'm a bit stuck. Can anyone help. Thanks

edit: the second html is as followed:

 <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

You have to move display = document.getElementById("counter2"); into each function The assignment of display is done on page load, doesn't matter in two script sections or in a single one.

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

display variable, like:

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

Or use display2 instead of display on the second counter.

Answer 2

That's because these lines:

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

And also:

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

Are outside the functions, and thus global.. thus they overwrite each other. Perhaps Have only one version of each CountUp() and CountDown(), but allow a parameter that specifies the number of the counter.

Edit: I think you would have had it if you had also changed the display variable to display1 and display2.