除非从函数调用，否则Javascript整数增量不起作用

Question

我打算将此问题作为一个问题发布，但我后来找到了一个“解决方案”（如果就是这样），现在这更像是试图理解这种情况。

我有一个javascript代码，在屏幕上显示数字0，然后当点击一个按钮时，该数字应该根据点击按钮的次数而增加。

这是我最初使用的代码：

var number = 0;

$ (document).ready (function() {

    document.getElementById("display").innerHTML = "Number of clicks: " + number;
    $("#submit").bind ('click', function(event) {
    document.getElementById("display").innerHTML = "Number of clicks: " + number++;

});
});

问题是按钮点击事件仅在第二次点击后才起作用。意思是我必须在增量工作之前单击按钮两次。 所以我创建了一个函数：

function increment () {
   number++;
   return number;
}

然后将初始代码的最后一行更改为：

   document.getElementById("display").innerHTML = "Number of clicks: " + increment();

现在，当我第一次点击按钮时，数字会增加。 我只需要知道为什么第一种方法不起作用。

Answer 1

使用++编号而不是编号++

number ++之后会增加数字的值。

Answer 2

您的代码运行正常，即使是第一次。但显示的值比点击次数1小。

您正在使用prefix increment operator (++counter)。在prefix increment operation首先，值为evaluated or returned，然后是incremented。

但在postfix increment operation (counter++)首先，值为incremented，然后是returned

使用现有代码并将number初始化为1并执行代码。

您将获得预期的结果。

如果您希望将初始化维持为0，请使用postfix increment operator来获得所需的结果。

我的建议是不要使用其中任何一个，而是使用下面的

number += 1;

Answer 3

这在很多语言中很常见。

var i = 0; 
1 + i++

返回1

var i = 0; 
1 + ++i

返回2

不同之处在于变量是否在表达式中被评估之前或之后递增。

Answer 4

使用此

$('#target').click(function() {
    $('#output').html(function(i, val) { return val*1+1 });
});

HTML

<button id="target" type="button">Click Me</button>
<div id="output">10</div>

SEE DEMO HERE

Answer 5

 The answer is simple, why your first code did not work for you, as expected.

 var number = 0;

 $ (document).ready (function() {

   document.getElementById("display").innerHTML = "Number of clicks: " + number;
    $("#submit").bind ('click', function(event) {
     document.getElementById("display").innerHTML = "Number of clicks: " + number++;

    });
 });

 >>> This first time when DOM element load, The Value get printed as :
     output : Number of clicks: 0 // because you have initialize number as 0.
     Now when you click "Click Button", you have POST-INCREMENTED the Value, means 
     the value get's incremented after the action is completed. So in this case,
     when you click first time, the number is still 0 and get printed again as
    "Number of clicks": 0 and then the value get's incremented by Post-increment
    and become's 1. When you click for second time,
    the output :"Number of click": 1 get's printed.