CODEWITHSUNDEEP
javascript
jsjs
jsjs

Reputation: 11

Incorrect increments/decrements on JS counter

I am learning JS and working on this counter that increments/decrements value when clicked, for e.g. the current value is 6 and if I decrement it , it goes 7,6,5 and so on

HTML:

<div id="add">Add</div>
<span id="text">0</span>    
<div id="red">Reduce</div>

JS:

var add  = document.getElementById("add");

var text  = document.getElementById("text");
var count = 1;

add.addEventListener("click", function() {
    text.innerText = count++;
});

red.addEventListener("click", function() {
    text.innerText = count--;
});

What am I missing here?

Upvotes: 0

Views: 138

Answers (6)

Azad
Azad

Reputation: 5264

Just use JS increment decrement operators in correct way

var add = document.getElementById("add");

var text = document.getElementById("text");
var count = 0;

add.addEventListener("click", function() {

  text.innerText = ++count;
});

red.addEventListener("click", function() {

  text.innerText = --count;

});
<div id="add">Add</div>
<span id="text">0</span>
<div id="red">Reduce</div>

Upvotes: 1

Mamun
Mamun

Reputation: 68933

You can set the counter to 0. Then instead of using post-increment/post-decrement use pre-increment/pre-decrement.

If used prefix with operator before operand (for example, ++x), then it returns the value after incrementing.

If used prefix (for example, --x), then it returns the value after decrementing.

var add  = document.getElementById("add");

var text  = document.getElementById("text");
var count = 0;

add.addEventListener("click", function() {
  text.innerText = ++count;
});

red.addEventListener("click", function() {
  text.innerText = --count;
});
#add{
  color: green; 
  width: 60px; 
  border: 1px solid green; 
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
}
#red{
  color: red; 
  width: 60px; 
  border: 1px solid red;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
}
<div id="add">Add</div>
<span id="text">0</span>    
<div id="red">Reduce</div>

Upvotes: 0

Rasoul Taheri
Rasoul Taheri

Reputation: 822

Its refer to operator priority. Your following code: 

text.innerText = count++;

Means:
1: text.innerText = count;
2: count = count + 1;

But the following line :

 text.innerText = ++count;

Means:
1: count = count + 1;
2: text.innerText = count;

See this for more result : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

Upvotes: 0

Ben
Ben

Reputation: 2706

Your first issue is that your count variable starts at 1 while your <span> text starts at 0. You want these values to be same.

Secondly, you should switch your increment/decrement to perform the increment and decrement before assigning it the text.innerText value (i.e. pre-incrementing). This can be done as follows:

add.addEventListener("click", function() {
    text.innerText = ++count; // See how the ++ comes beforehand
});

red.addEventListener("click", function() {
    text.innerText = --count; // See how the -- comes beforehand
});

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

Try this- Assign count to 0, and use pre-increment and pre-decrement operators. then assign

var add  = document.getElementById("add");

var text  = document.getElementById("text");
var count = 0;

add.addEventListener("click", function() {

text.innerText = ++count;
});

red.addEventListener("click", function() {

text.innerText = --count;

});

Upvotes: 1

brk
brk

Reputation: 50291

Increment/Decrements the value first then assign it

var add = document.getElementById("add");
var text = document.getElementById("text");
var count = 0;

add.addEventListener("click", function() {
  count += 1
  text.innerText = count;
});
red.addEventListener("click", function() {
  count -= 1
  text.innerText = count;

});
<div id="add">Add</div>
<span id="text">0</span>
<div id="red">Reduce</div>

Upvotes: 0

Related Questions