Question

I have a list of buttons with numeric values and a total number displayed on top of the page.

OnClicking one of the buttons (e.g. “Add 100”), I want the integer value of 100 to be added to the total points displayed. I want the total to update instantly versus the page having to refresh every time.

Do I have the right idea? Is this possible with JavaScript and jQuery or do I need to try something else?

Answer 1

Using jquery:

http://jsfiddle.net/mYuRK/

HTML

<button value="100">100</button>
<button value="200">200</button>
<button value="300">300</button>
<div class="total"></div>

JS

var theTotal = 0;
$('button').click(function(){
   theTotal = Number(theTotal) + Number($(this).val());
    $('.total').text("Total: "+theTotal);        
});

$('.total').text("Total: "+theTotal);