Javascript 计数器未正确递增答案

【问题标题】：Javascript counter not incrementing correctlyJavascript 计数器未正确递增
【发布时间】：2016-02-03 23:08:43
【问题描述】：

我正在尝试在 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>

【问题讨论】：

标签： javascript html integer increment

【解决方案1】：

如果将++ 运算符放在变量后面，则counter1 将在分配给innerHTML 后递增。

尝试使用++counter1 和--counter1，因为这将在运算符分配之前递增并产生预期的输出。

【讨论】：

这到底是谁写的JS！大人！

【解决方案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 错误地使用了自增和自减运算符

【讨论】：

不要只是发布代码，让人们猜你做了什么。
你改变了什么？为什么？

【解决方案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

【讨论】：

这确实回答了这个问题。答案不能总是显式。答案，特别是如果以极其简化和短代码 sn-ps 的形式给出，也可以是隐式。
作为一个简短的说明，也许考虑在代码块之外添加一些文本解释。仅代码的答案往往质量低下，因为虽然他们给了 OP 一个例子，但后来的用户（甚至可能是 OP）可能不明白发生了什么。（我知道您在代码的 cmets 中添加了一些解释，但文字解释可以大大提高答案的质量和答案的可理解性。）