JQuery - increase and decrease input value using a 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>

Run codeHide result

I am facing two problems, as you can see.

• At the beginning, when I press the button, the process is delayed and starts counting with a second click.

• If I click the + (plus) button and then the - (minus) button, the process does not work properly. What can I do?

Answer 1

, ++ ( ) - , (-- ). , , " , ". (, ++x), " , ".

x++ x--, . ++x --x, .

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>

Hide result

Answer 2

pre-increment (--x ++x) post-increment (x-- x++), :

• Post-increment (x++): x .

• Pre-increment (++x): x .

, .

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>

Hide result

Answer 3

Remember how the and ++ operator works if you put it after updating after the fact, so you change the value xafter 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);
    });