How to update a odometer value with a button click in Javascript?

Question

 <style> body { font-family: "Helvetica Neue" } #wrapper .counter { display:inline-block; font-size:2em; line-height:1.2em; } .counter span.digit { background:#161616; background: #3F3F3F; /* Old browsers */ background: linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%); background: -o-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%); background: -moz-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%); background: -webkit-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%); background: -ms-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0A0A0A), color-stop(0.5, #2B2B2B), color-stop(1, #3F3F3F)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F')"; /* IE8 */ zoom:1; -webkit-border-radius:0.1em; -moz-border-radius:0.1em; border-radius:0.1em; background-clip:border; color:#FFF; display:inline-block; float:left; height:44px; margin:0 1px; overflow:hidden; padding:0; position:relative; text-align:center; } .counter span.digit span { line-height:44px; position:relative; top:0; } .counter span.digit hr { border-color: transparent; -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5); -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5); box-shadow: inset 0 2px 1px rgba(0,0,0,0.5); height: 3px; margin: -2px 0 0 0; position: absolute; top: 50%; width: 100%; z-index: 1; } .counter span.separator { display:block; float:left; font-family:Georgia, serif; font-size:0.5em; position:relative; top:0.5em; } .counter span.separator hr { display:none; } </style> 

 <div id="sidebar" class="sidebar" style="float:left;"> <div class="textwidget"><p style="text-align:left; color:#000000; padding-left: 10px; padding-right: 10px; bottom-margin: 40px;">Boomerang Giving™ is a national movement of Baby Boomers working to make our communities stronger by reinvesting what we save from senior discounts to charity.</p> <br> <br></div> <div class="textwidget"><p style="color=#ff6600; text-align:center;">Since Nov. 2014:<br></p> <span class="counter"><span class="digit"> <span title="0">0</span> <hr> </span> <span class="digit"> <span title="0">0</span> <hr> </span> <span class="separator"> <span title=",">,</span> <hr> </span> <span class="digit"> <span title="0">0</span> <hr> </span> <span class="digit"> <span title="0">0</span> <hr> </span> <span class="digit"> <span title="4">4</span> <hr> </span> </span> <div style="clear:both"> <p style="color=#ff6600; text-align:center; margin-top: 10px; margin-bottom:20px;">Boomers have taken the<br> BOOMERANG PLEDGE<br></p></div> </div> <div class="textwidget"><div class="aligncenter"><style>#wrapper .fusion-button.button-1{border-width:1px;color:#ffffff;border-color:#ffffff;}#wrapper .fusion-button.button-1:hover,.fusion-button.button-1:focus,.fusion-button.button-1:active{border-width:1px;border-color:#ffffff;color:#ffffff;}#wrapper .fusion-button.button-1{background: #f15a22; background-image: -webkit-gradient( linear, left bottom, left top, from( #ef871f ), to( #f15a22 ) ); background-image: -webkit-linear-gradient( bottom, #ef871f, #f15a22 ); background-image: -moz-linear-gradient( bottom, #ef871f, #f15a22 ); background-image: -o-linear-gradient( bottom, #ef871f, #f15a22 ); background-image: linear-gradient( to top, #ef871f, #f15a22 );}#wrapper .fusion-button.button-1:hover,.button-1:focus,.fusion-button.button-1:active{background: #d17c57; background-image: -webkit-gradient( linear, left bottom, left top, from( #e8b38f ), to( #d17c57 ) ); background-image: -webkit-linear-gradient( bottom, #e8b38f, #d17c57 ); background-image: -moz-linear-gradient( bottom, #e8b38f, #d17c57 ); background-image: -o-linear-gradient( bottom, #e8b38f, #d17c57 ); background-image: linear-gradient( to top, #e8b38f, #d17c57 );}</style><a class="button xlarge button default fusion-button button-flat button-pill button-xlarge button-default button-1 buttonshadow-1" type="button" target="_self" title="Take the Boomerang Pledge!" href="http://boomeranggiving.org/take-the-boomerang-pledge/"><span class="fusion-button-text">TAKE THE PLEDGE!</span></a></div> <br> <br> </div> <div class="textwidget"><br> <h2 style="text-align:center; margin-top:15px; margin-bottom:5px;">Tell Your Friends About<br>BOOMERANG GIVING!</h2></div> <!-- Simple Share Buttons Plus (v0.4.2) simplesharebuttons.com/plus --><div class="ssbp-wrap"><div class="ssbp-container" data-ssbp-share-text="" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-title="Private: Take the Pledge" data-ssbp-short-url="" style="display: block;"><a href="http://www.facebook.com/sharer.php?u=http://boomeranggiving.org/" class="ssbp-btn ssbp-facebook" data-ssbp-title="Private: Take the Pledge" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-site="Facebook"><span class="ssbp-text">Facebook</span></a><span class="ssbp-total-shares ssbp-total-facebook-shares ssbp-each-share">0</span><a href="http://twitter.com/share?url=http://boomeranggiving.org/&amp;text=Private%3A+Take+the+Pledge+Tell+your+friends%21&amp;hashtags=" class="ssbp-btn ssbp-twitter" data-ssbp-title="Private: Take the Pledge" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-site="Twitter"><span class="ssbp-text">Twitter</span></a><span class="ssbp-total-shares ssbp-total-twitter-shares ssbp-each-share">4</span><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://boomeranggiving.org/" class="ssbp-btn ssbp-linkedin" data-ssbp-title="Private: Take the Pledge" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-site="LinkedIn"><span class="ssbp-text">Linkedin</span></a><span class="ssbp-total-shares ssbp-total-linkedin-shares ssbp-each-share">0</span><a href="mailto:?Subject=Private: Take the Pledge&amp;Body=%20http://boomeranggiving.org/" class="ssbp-btn ssbp-email" data-ssbp-title="Private: Take the Pledge" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-site="Email"><span class="ssbp-text">Email</span></a></div></div> <div class="textwidget"><br> <br> <br> <br> <div style="background-color:#363839; border-top: 12px solid #e9eaee; border-bottom: 12px solid #e9eaee; border-left: 2px solid #e9eaee; border-right: 2px solid #e9eaee;"> <p style="text-align:center; line-height: 22px; color:#fff;"><strong>Let's Stay in Touch!</strong></p> <p style="text-align:center !important; line-height: 22px; color:#fff;">Enter e-mail to stay informed about<br>BOOMERANG GIVING</p> <!-- Begin MailChimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:none; font: 18px 'PTSansRegular', Arial, Helvetica, sans-serif; width:100%; text-align:center !important;} /* Add your own MailChimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id="mc_embed_signup"> <form action="//boomeranggiving.us9.list-manage.com/subscribe/post?u=081f420813d884ff7b9270435&amp;id=823e7c4392" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate"> <div id="mc_embed_signup_scroll"> <div class="mc-field-group"> <label for="mce-EMAIL">Email Address </label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" aria-required="true"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;"><input type="text" name="b_081f420813d884ff7b9270435_823e7c4392" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="SUBMIT" name="SUBMIT" id="mc-embedded-subscribe" class="button"></div> </div> </form> </div> <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> <!--End mc_embed_signup--> <p style="font-size:13px; text-align:center;">*We will not share your e-mail.</p></div> <br> <br> <br> <br> <br></div> </div> 

I need the following Javascript odometer to increase by 1 every time a button is clicked. This is part of a charity site and each time someone donates the odometer will update.

The following is the script:

<script>
    ;(function($){
        /*
            Function: initCounter

            Initializes the scrolling counter using the value currently displayed in the element.

            Parameters:

                $this - the counter container
                e - jQuery Event object
        */
        function initCounter($this, e){
            $this.find('.digit').each(function(){
                var $display = $(this);
                var $digit = $display.find('span');

                $digit.html([0,1,2,3,4,5,6,7,8,9,0].reverse().join('<br/>'))
                $digit.css({ 
                    top: '-' + (parseInt($display.height()) * (10 - parseInt($digit.attr('title')))) + 'px'
                });
            });

            animateDigit($this.find('.digit:last'), e);
        }

        /*
            Function: animateDigit

            Moves the digit indicated by $this one step. If the end of the counter has been reach, the subsequent digit(s) will also be rotated

            Parameters:

                $this - digit to be rotated
                e - jQuery Event object
        */
        function animateDigit($this, e){
            var $counter = $this.closest('.counter');
            var $display = $this;
            var $digit = $display.find('span');

            // If we've reached the end of the counter, tick the previous digit
            if(parseInt($digit.css('top')) == -1 * parseInt($display.height())){
                animateDigit($display.prevAll('.digit:first'), e);
            }

            $digit.animate({
                top: '+=' + $display.height() + 'px'
            }, 500, function(){
                // Repeat the animation on a semi-random interval
                if($display.index('.counter .digit') == $counter.find('.digit').length - 1){
                    setTimeout(function(){
                        animateDigit($display, e);
                    }, Math.max(550, Math.random() * 10000));
                }

                // If we've reached the end of the counter, loop back to the top
                if(parseInt($digit.css('top')) > -1 * parseInt($display.height())){
                    $digit.css({
                        top: '-' + (parseInt($display.height()) * 10) + 'px'
                    });
                }
            });
        }

     // Remove comments to animate odometer

     $(function(){
            initCounter($('.counter'), $.Event('load'));
        });
    })(jQuery);


</script>

Thank you so much in advance for any help you can give. Again this is my first time, so please go easy on me.

Answer 1

In jquery, binding an event to a click event on a button can be done like so:

HTML:

<button id="mybuttonID">Click me to increment odometer!</button>

JS:

$(document).ready(function() {
    // wait for the dom to initialize before binding events
    $('body').on('click', '#mybuttonID', animateDigit);
});

Hope this helps!

Answer 2

if you don't have the necessity to store it on db, i think it could help you.
http://jsbin.com/quvulabaro/2/edit?html,css,js,output