Javascript href link counter.

Question

I need to make a button that increments and decrements a variable. When you click a link it increments a variable in the link href.When you click another link it decrements a variable in the link href.The variable can only go up to the last number in a specified array.PHP will be embedded around it. Any ideas?

<script type="text/javascript">
var counter = 0;
document.write('<button onclick="counter++">Increment</button>');
document.write(counter);
</script>

This is an abomination I know, and it uses a button.

Answer 1

I'm going to make a whole lot of assumptions, including that you can use jQuery. It can be done without it, but it's simply easier to write with it. The only real jQueryness that I'm using is applying the handlers -- adjust this as necessary for another framework or to use pure javascript. Also, I assume that the base link doesn't have any existing query parameters and that you're adding the count as a query parameter. Again, adjust as necessary to reflect how you want the url built.

<a class="link" href="http://example.com/somecontroller/someaction"&gt;Click Me</a>
<button class="increment">Increment</button>
<button class="decrement">Decrement</button>

<script type="text/javascript">
   $(function() {
       var counter = 0;
       var max = <?php echo count($arr) >;
       $('button.increment').click( function() {
            ++counter;
            if (counter > max) counter = max;
       });
       $('button.decrement').click( function() {
            --counter;
            if (counter < 0) counter = 0;
       });
       $('a.link').click( function() {
            window.location = $(this).attr('href') + '?count=' + counter;
            return false; // important to stop the default link action
       });
   });
</script>