Javascript counter not incrementing correctly

Question

I am trying to implement a counter in javascript that increments up when a thumbs up button is clicked, and down when the thumbs down is clicked. However, for some reason the first time the user clicks the thumbs down button the counter increments up a single time, after which it begins to increment correctly (down). Can someone have a look over my code and see what's causing this? Code as follows:

<script type="text/javascript">
var counter1 = 0;
</script>

<div class="pastel-vote-block">
  <img class="thumbup" onclick="document.getElementById('tallyone').innerHTML = counter1++" src="img/thumb-up-dark.png" height="32" width="32" alt="thumb up">
  <p class="tally" id="tallyone">0</p>
  <img class="thumbdown" onclick="document.getElementById('tallyone').innerHTML = counter1--" src="img/thumb-down-dark.png" height="32" width="32" alt="thumb down">
</div>

Peter Carter · Accepted Answer · 2015-11-03 17:41:26Z

8

If you place the ++ operator after the variable, counter1 will be incremented after being assigned to innerHTML.

Try with ++counter1 and --counter1 as this will increment before the operator assignment and result in the expected output.

edited Nov 3, 2015 at 17:41

Peter Carter

2,7489 gold badges31 silver badges46 bronze badges

answered Nov 3, 2015 at 17:18

Guillaume Pannatier

3241 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter Carter Over a year ago

Who in heck wrote JS this way! My lord!

Ramanlfc · Accepted Answer · 2015-11-03 17:18:23Z

0

<script type="text/javascript">
var counter1 = 0;
</script>

<div class="pastel-vote-block">
  <img class="thumbup" onclick="document.getElementById('tallyone').innerHTML = ++counter1" src="img/thumb-up-dark.png" height="32" width="32" alt="thumb up">
  <p class="tally" id="tallyone">0</p>
  <img class="thumbdown" onclick="document.getElementById('tallyone').innerHTML = --counter1" src="img/thumb-down-dark.png" height="32" width="32" alt="thumb down">
</div>

OP used incement and decrement operators incorrectly

edited Nov 3, 2015 at 17:18

answered Nov 3, 2015 at 17:17

Ramanlfc

8,3541 gold badge21 silver badges24 bronze badges

2 Comments

connexo Over a year ago

Dont just post code and have people guess what you have changed.

Rayon Over a year ago

What have you changed ? Why ?

connexo · Accepted Answer · 2015-11-03 17:20:04Z

0

var a = 10, b;

b = a++; // b will be 10, a will be 11

var a = 10, b;

b = ++a; // b will be 11, a will be 11

answered Nov 3, 2015 at 17:20

connexo

57.3k15 gold badges112 silver badges150 bronze badges

2 Comments

connexo Over a year ago

This does answer the question. Answer must not always be explicit. Answers, especially if given in the form of extremely simplified and short code snippets, can also be implicit.

Kendra Over a year ago

As a quick note, perhaps consider adding some textual explanation outside of the code block. Code-only answers tend to be low-quality, as while they give the OP an example, later users (and potentially even the OP) may not understand what's going on. (I know you added a bit of an explanation in the comments on the code, but textual explanation can go a long way towards the quality of an answer and the understandablity of an answer.)

Collectives™ on Stack Overflow

Javascript counter not incrementing correctly

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related