Question

I have this:

            <ul class="deposit" style="float:left;list-style-type:none;">
                <a href="javascript:void(0)" id="inc"><li class="first">+</li></a>
                <a href="javascript:void(0)" id="dec"><li class="second">-</li></a>
            </ul>

<div class="left deposit_amount">$<span id="amountSpan"></span></div>

I want to do, so whenever I click the #inc the #amountSpan will increase by 5. And whenever the #dec is clicked, the value will be decreased by 5.
I also wish to have, so the value cannot go below 0.

Currently I have this:

  $(function(){
    $("#inc").click(function(){
      $("#amountSpan").val( Number($("#amountSpan").val()) + 5 );
    });
    $("#dec").click(function(){
      $("#amountSpan").val( Number($("#amountSpan").val()) - 5 );
    });
  });

But this does not work. How can I obtain this?

Thanks in advance.

Update:

I try to set a max number, with this:

$("#inc").click(function(){
  $("#amountSpan").text( Math.max(20, Number($("#amountSpan").text()) + 5) ) 
});

But it just goes past 20.

Answer 1

Instead of .val() (which is for form input elements), use .text(). Oh, and when you’re incrementing, you’ll need to make sure the value is forced to be a number first. (oh wait you already are 🙂

$(function(){
    $("#inc").click(function(){
      $("#amountSpan").text( Number($("#amountSpan").text()) + 5 );
    });
    $("#dec").click(function(){
      $("#amountSpan").text( Number($("#amountSpan").text()) - 5 );
    });
  });

To keep the amount greater than or equal to zero:

    $("#amountSpan").text( Math.max(0, Number($("#amountSpan").text()) - 5) )