jQuery - increase and decrease value of input by button

Question

var x = 1;
$("#sinolo input").attr('value', x);
$("#inc").click(function(){
  $("#sinolo input").attr('value', x++);
});
$("#dec").click(function(){
  $("#sinolo input").attr('value', x--);
});

#sinolo{
	width: 35%;
	float: left;
}
#sinolo input{
	width: 45%;
	border: none;
	text-align: center;
}
#sinolo button{
	width: 25%;
	font-size: 10px;
	padding: 8px 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="sinolo">
  <button id="dec" class="btn btn-info fa fa-minus pull-left"></button>
  <input type="text" name="" value="">
  <button id="inc" class="btn btn-info fa fa-plus pull-right"></button>
</div>

I face two problems as you can see.

1. At start when I press the button the process is delaying and begins the counting by second click.

2. If I press the + (plus) button and then the - (minus) button, the process is not working properly. What can I do?

Answer 1

The problem is that ++ (the increment operator) behaves differently depending on whether it is before or after the variable in question (the -- decrement operator is the same). Placed after the variable, like you have, it means "give me the value of the variable, then increase it by one". Placed before the variable (e.g. ++x), it means "increase the value of the variable, then give me the new value".

Because you are doing x++ or x--, you are getting the value of the variable before the operation. Use ++x and --x and your code will work fine.

var x = 1;
	$("#sinolo input").attr('value', x);
    	$("#inc").click(function(){
	      $("#sinolo input").attr('value', ++x);
	    });
	    $("#dec").click(function(){
	      $("#sinolo input").attr('value', --x);
	    });

#sinolo{
	width: 35%;
	float: left;
}
#sinolo input{
	width: 45%;
	border: none;
	text-align: center;
}
#sinolo button{
	width: 25%;
	font-size: 10px;
	padding: 8px 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="sinolo">
  <button id="dec" class="btn btn-info fa fa-minus pull-left"></button>
  <input type="text" name="" value="">
  <button id="inc" class="btn btn-info fa fa-plus pull-right"></button>
</div>

Answer 2

You've just to use pre-increment (--x and ++x) instead of post-increment (x-- and x++) since :

• Post-increment (x++): Increments the value of variable x after processing the current statement.

• Pre-increment (++x): Increments the value of variable x before processing the current statement.

Hope this helps.

var x = 1;
$("#sinolo input").attr('value', x);
$("#inc").click(function(){
  $("#sinolo input").attr('value', ++x);
});
$("#dec").click(function(){
  $("#sinolo input").attr('value', --x);
});

#sinolo{
	width: 35%;
	float: left;
}
#sinolo input{
	width: 45%;
	border: none;
	text-align: center;
}
#sinolo button{
	width: 25%;
	font-size: 10px;
	padding: 8px 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="sinolo">
  <button id="dec" class="btn btn-info fa fa-minus pull-left"></button>
  <input type="text" name="" value="">
  <button id="inc" class="btn btn-info fa fa-plus pull-right"></button>
</div>

Answer 3

Remeber how the -- and ++ operator work, if you put them after you're updating after the fact, so you modify the value of x after changing the input value, so just put them before

var x = 1;
$("#sinolo input").attr('value', x);
    $("#inc").click(function(){
      $("#sinolo input").attr('value', ++x);
    });
    $("#dec").click(function(){
      $("#sinolo input").attr('value', --x);
    });