Javascript計數器未正確遞增

Question

我正在嘗試在javascript中實現一個計數器，該計數器在單擊大拇指按鈕時遞增，而在點擊大拇指按鈕時遞減。 但是，由於某些原因，用戶第一次單擊拇指向下按鈕時，計數器會一次遞增一次，然后計數器開始正確遞增（遞減）。 有人可以看一下我的代碼，看看是什么原因嗎？ 代碼如下：

<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>

Answer 1

如果將++運算符放在變量之后，則將counter1分配給innerHTML之后將對其進行遞增。

嘗試使用++counter1和--counter1因為這會在分配操作符之前增加並產生預期的輸出。

Answer 2

<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錯誤使用增量和減量運算符

Answer 3

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