How to increment and decrement values with javascript

Asked

Viewed 6,194 times

1

I have a textbox, and two buttons more and less, I want to decrease to zero, I managed to do but I can not decrease of 1:

HTML

<asp:TextBox ID="txtAcrescimo" type="number" CssClass="form-control" MaxLength="18"
     runat="server" onblur="javascript:defineQuantidade();"></asp:TextBox>

  <div style="display: inline-block; margin-right:10px;">
    <input id="aumentaAcrescimo" type="button" onclick="aumentaAcrescimo()" style="width: 35px; margin-left:10px; height: 35px" value="+"  />
    <td>
      <input id="diminuiAcrescimo" type="button" style="width: 35px; height:35px " value="-" />
  </div>

JS

$("#txtAcrescimo").val(1);

//aumenta acrescimo
$("#aumentaAcrescimo").click(function () {
  var acrescimo = parseInt($("#txtAcrescimo").val());

  if (acrescimo <= 0) {
    $("#txtAcrescimo").val(1);
  } else {
    acrescimo++;
  }

  $("#txtAcrescimo").val(acrescimo);

});

$("#diminuiAcrescimo").click(function () {
  var acrescimo = parseInt($("#txtAcrescimo").val());

  if (acrescimo <= 0) {
    $("#txtAcrescimo").val(1);
  } else if(acrescimo > 1) {
    acrescimo--;
  }

  $("#txtAcrescimo").val(acrescimo);
});

I got it that way and it worked, but it starts at 1, I tried to apply the logic to start from zero and it won’t.

javascript

  • this form I showed, is applied to start from 1, and decrease to 1, as would be the correction to start from 0, and decrease to zero?

  • Replacing where you have 0 with -1 and 1 with 0 does not solve no?

2 answers

6


You can simplify it like this:

$("#txtAcrescimo").val(0); // valor de inicio

$("#aumentaAcrescimo").click(function () {
    var input = $("#txtAcrescimo")[0];
    input.value = parseInt(input.value, 10) + 1;
});

$("#diminuiAcrescimo").click(function () {
    var input = $("#txtAcrescimo")[0];
    var decrescimo = parseInt(input.value, 10) - 1;
    input.value = decrescimo < 1 ? 0 : decrescimo ;
});

jsFiddle: https://jsfiddle.net/q14pfp0h/2/

  • It worked, if I wanted to do the same thing by limiting it to 1, which I would need to change?

  • 1

    I got it here, vlw

3

You already have an excellent solution, I will leave a version making use of the potentialities of Jquery for the purpose of code reduction and optimization of it:

var $input = $("#txtAcrescimo");

$input.val(0);

$(".altera").click(function(){
    if ($(this).hasClass('acrescimo'))
        $input.val(parseInt($input.val())+1);
    else if ($input.val()>=1)
        $input.val(parseInt($input.val())-1);
});

Example

Also in the Jsfiddle.

// Cache do elemento para evitar constantes ciclos de procura pelo mesmo
var $input = $("#txtAcrescimo");

// Colocar a 0 ao início
$input.val(0);

// Aumenta ou diminui o valor sendo 0 o mais baixo possível
$(".altera").click(function() {
  if ($(this).hasClass('acrescimo'))
    $input.val(parseInt($input.val()) + 1);
  else if ($input.val() >= 1)
    $input.val(parseInt($input.val()) - 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input type="text" id="txtAcrescimo" />
<button type="button" class="altera acrescimo">+</button>
<button type="button" class="altera decrescimo">-</button>

Note:
As we can see in documentation, the element <button/> when kind button: type="button", has no action pattern, making it unnecessary to use the method preventDefault.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.