JavaScript实现点击计数为何首次点击无反应、第二次才生效？

问题根因 #

问题出在后置自增运算符count++的执行逻辑：
后置自增的规则是先返回变量当前值，再执行+1操作。你代码里count的初始值为0，首次点击按钮时，程序会先把count当前的0赋值给<p>标签的innerHTML，之后才将count更新为1。此时页面显示的内容和初始的0没有区别，所以看起来像首次点击没有触发。
第二次点击时，count当前值为1，程序先把1赋值给页面，再将count更新为2，页面内容发生变化，就造成了从第二次才开始计数的错觉。

修复方案 #

提供两种可用的修复方式：

• 方案一：替换为前置自增运算符++count，前置自增会先执行+1操作，再返回更新后的值

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

• 方案二：调整执行顺序，先更新计数变量，再赋值给DOM节点

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

内容的提问来源于stack exchange，提问作者Saeed Ghezel Arsalan