Question

Imagine the user gets a better discount the higher the data-hipsterness value is and we get this value by asking 4 questions and providing 4 choices for each question. I’m sure it’s most basic stuff yet…I need to keep track of a variable every time the user choose one of the options and update it’s value so that at the end of the “test” I can do different ifs statements with that result.
What I got so far is a demo http://lab.polmoneys.com/nohints.html and this code :

EDIT http://jsfiddle.net/polmoneys/s4xLF/4/

$('h3').click(function(event) {

var value = $(this).data("hipsterness");    
var context =$(this).parent(".cpu");
var counter =$("#counter").text();
var newValue=  counter + value;

$("#counter").text("" + value);
$("#total").val(newValue);

    context.fadeOut("slow", function(e){ 
        context.next(".cpu").fadeIn();

        });
});

thanks

Answer 1

The problem, as I think Gaby was eluding to, is that you’re concatenating strings, not adding numbers. However, you will need to set an initial value on the total input text field that is numeric to get it to work. Alternatively, could do a null coalesce to set it to 0 if it can’t find a numeric value as NaN will be ‘falsey’. This should work for you:

$('h3').click(function(event) {

  var value = $(this).data("hipsterness");    
  var context = $(this).parent(".cpu");
  var counter = parseInt($("#total").val(), 10) || 0;
  var newValue= counter + value;

  $("#counter").text("" + value);
  $("#total").val(newValue);

  context.fadeOut("slow", function(e){ 
    context.next(".cpu").fadeIn();
  });
});

On an unrelated note, you’re going to want to make your input field readonly, or people will be able to freely type whatever value they like in the field, and make sure your cart information isn’t easily visible by clicking view source (because then I could easily just open a console and change the price on whatever I want).