JQuery increment or decrement a variable by 1

Question

I have a simple plus and minus button on each side of the input field, as in the code below

<input type="button" value="-" id="subs" class="btn btn-default pull-left" style="margin-right: 2%" onclick="subst()" />&nbsp;
<input type="text" style="width: 410px;text-align: center; margin: 0px;" class="onlyNumber form-control pull-left" id="noOfRoom" value="<?php echo set_value('noOfRoom'); ?>" name="noOfRoom" />&nbsp;
<input type="button" value="+" id="adds" onclick="add()" class="btn btn-default" />

in order to add or subtract numbers when adding rooms and jquery functions as

function add() {
    var a = $("#noOfRoom").val();
    a++;
    if (a => 1) {
        $("#subs").removeAttr("disabled");
    }
    $("#noOfRoom").val(a);
};

function subst() {
    var b = $("#noOfRoom").val();
    if (b.length > 0 && b >= 1) {
        b--;
        $("#noOfRoom").val(b);
    }
    else {
        $("#subs").attr("disabled", "disabled");
    }
};

but the following problems are shown:

• when I press the subtraction (-) button in the initial phase -1, it is displayed in the input field, where by default the subtraction (-) button should be disabled to make the number number negative.
• Each time I press the PLUS or MINUS buttons, the numbers are added or subtracted by 2. How can I solve it?

Answer 1

, :

• onclick= jQuery. - jQuery.
• prop, attr DOM (, ). boolean.
• !a ( 0).
• , DOM .

.

$('#adds').click(function add() {
    var $rooms = $("#noOfRoom");
    var a = $rooms.val();
    a++;
    $("#subs").prop("disabled", !a);
    $rooms.val(a);
});
// Set initial disabled state
$("#subs").prop("disabled", !$("#noOfRoom").val());

$('#subs').click(function subst() {
    var $rooms = $("#noOfRoom");
    var b = $rooms.val();
    if (b >= 1) {
        b--;
        $rooms.val(b);
    }
    else {
        $("#subs").prop("disabled", true);
    }
});

JSFiddle: https://jsfiddle.net/k7nyv84b/4/

Answer 2

https://fiddle.jshell.net/n7ug52dr/

, , 1, -1

---

:

function add() {
    var a = $("#noOfRoom").val();
    a++;
    if (a && a >= 1) {
        $("#subs").removeAttr("disabled");
    }
    $("#noOfRoom").val(a);
};

function subst() {
    var b = $("#noOfRoom").val();
    // this is wrong part
    if (b && b >= 1) {
        b--;
        $("#noOfRoom").val(b);
    }
    else {
        $("#subs").attr("disabled", "disabled");
    }
};

Answer 3

, ! ,

See working example below.

$(function(){

  $('#adds').on('click',add);
  $('#subs').on('click',remove);

});


function add(){

  var input = $('#noOfRoom'),
      value = input.val();
      
  input.val(++value);
  
  if(value > 0){
    $('#subs').removeAttr('disabled');
  }

}


function remove(){

   var input = $('#noOfRoom'),
       value = input.val();
      
   if(value > 0){
     input.val(--value);
   }else{
     $('#subs').attr('disabled','disabled');
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="subs" class="btn btn-default pull-left" style="margin-right: 2%"/>&nbsp;
<input type="text" style="width: 410px;text-align: center; margin: 0px;" class="onlyNumber form-control pull-left" id="noOfRoom" value="0" name="noOfRoom" />&nbsp;
<input type="button" value="+" id="adds" class="btn btn-default" />

Run code

Answer 4

take a look at this solution

<input type="button" value="-" id="subs" onclick="subst()" disabled>
 <input type="text" id="noOfRoom">
<input type="button" value="+" id="adds" onclick="add()">



function add() {
var a = $("#noOfRoom").val();
a++;
if (a >= 1) {
    $("#subs").removeAttr("disabled");
}

alert(a);
$("#noOfRoom").val(a);
}

function subst() {
var b = $("#noOfRoom").val();
if (b.length > 0 && b >= 1) {
    b--;
  alert(b);
    $("#noOfRoom").val(b);
}
else {
    $("#subs").attr("disabled", "disabled");

}

// alert ("works well"); }

Answer 5

The easiest way is to use the DOM to move through the elements and get its current value, and then increase / decrease.

I extended the code to make sure that when you click the minus button, the value does not decrease below zero.

<input type="button" value="-" class="qtyminus" field="quantity"> 
<input type="number" class="input-lg" id="quantity" name="quantity" value="1" min="1" style="padding:0px;height:30px;">
<input type="button" value="+" class="qtyplus" field="quantity">
<input type="submit" name="add" id="add" class="btn btn-large btn-border btn-dark" value="GET IT NOW" style="opacity: 1;">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
});
          
</script>

Run code

Answer 6

<button onClick="myfun()">+</button>
<!--<button onClick="myfun()" id="pluse">+</button>-->
<input type="text" id="pluse" >
<button onClick="myfun1()">_</button>


var a = 0;
function myfun(){
    a++;
    document.getElementById('pluse').value = a;
    //document.getElementById('pluse').innerHTML = a;
}
function myfun1(){
    a--;
    document.getElementById('pluse').value = a;
}