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=".3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href=".7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src=".11.0/jquery.min.js"></script>
<script src=".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>

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./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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?

• javascript
• jquery

Share Follow edited Nov 25, 2016 at 22:13 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Nov 25, 2016 at 22:03 Vasilis GreeceVasilis Greece 90711 gold badge1919 silver badges3939 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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>

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./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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>

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);
    });