为什么第二次点击按钮，而不是第一次？答案

【问题标题】：Why click the button a second time, not the first time?为什么第二次点击按钮，而不是第一次？
【发布时间】：2021-11-03 19:07:16
【问题描述】：

我编写了以下代码来对每次点击进行计数。但与此同时，第一次单击没有任何反应，并且按钮从第二次单击开始计数。你能帮我看看这段代码有什么问题吗？为什么我第一次点击时计数器没有启动？

<button id="btn" class="btn" >click me</button>
<p>0</p>


<script>
    let count = 0;
    let number =document.querySelector("p");

const btn =document.getElementById("btn");

        btn.addEventListener("click" ,  ()=>
            number.innerHTML = count++
    )

</script>

【问题讨论】：

您在设置值之后增加了它。使用++count。

标签： javascript ecmascript-6 timer counter addeventlistener

【解决方案1】：

count++返回加1前的值，分成两行：

let count = 0;
let number = document.querySelector("p");

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  count++;
  number.innerHTML = count;
});

<button id="btn" class="btn">click me</button>
<p>0</p>

【讨论】：

【解决方案2】：

正如有人已经提到的，后自增运算符 (count++) 在计算值后会增加值（因此 post）

一种选择是使用预递增运算符 (++count)，它会在变量递增后对其进行评估。

let count = 0;
const number = document.querySelector("p");

const btn = document.getElementById("btn");

btn.addEventListener("click", () => number.innerHTML = ++count);

<button id="btn" class="btn">click me</button>
<p>0</p>

【讨论】：

【解决方案3】：

先增加count的值，然后赋值给(number.innerHTML)。使用前置自增运算符 (++count)

【讨论】：