How to increment and decrement values with javascript

Navigation
1

I have a textbox , and two more and less buttons, I want to decrease to zero, I managed to do but I can not decrease from 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 logic to start from scratch and it will not.

    
asked by anonymous 10.04.2015 / 14:12

2 answers

6

You can simplify things 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: link

    
10.04.2015 / 14:22
3

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

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 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><inputtype="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 type button : type="button" , does not have an action default , making it unnecessary to use preventDefault .

    
10.04.2015 / 14:46
Simulate Click with webview in a href WebService / api consult court proceedings [closed]