Updating a span using jQuery, based on a simple live calculation from a input field

Question

So I have a tiny issue with some jQuery that I would appriciate some help on. I have two values, the one I get from an input field, the other from a static element. So it should be fairly simple, and I would like it as "LIVE" as possible. I made a JSFIDDLE for the sake of it. Please check it out.

http://jsfiddle.net/pzSxL/2/

$('#bet-amount').keyup(function() {
var amount = $("#bet-amount").val();
var odds = 2;

var total = amount * odds;

$("#potential-payout").val(total); 
});

Any help is greatly appriciated, and I hope that you can see that what i want is to update the span containing a 0 as default.

Best regards, André!

Answer 1

You made mistake with span.val(); You should use html or text jQuery method to update html inside span, and another thing, you should parse value from input field. So this is your function.

$('#bet-amount').keyup(function() {
    var amount = parseFloat($("#bet-amount").val());
    var odds = 2;

    var total = amount * odds;

    $("#potential-payout").html(total); // sets the total price input to the quantity * price
});