I was going to post this as a question to a problem but i later found a 'solution' (if that is what it is) and now this is more like an attempt to understand the situation.

I have a javascript code that displays the number 0 on the screen and then when a button is clicked, the number is supposed to increase according to the amount of times the button is clicked.

This was the code i used initially:

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

});
});

Problem was the button click event only worked AFTER the second click.Meaning i had to click the button twice before the incrementation worked. So i created a function:

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

and then changed the last line of the initial code to:

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

Now the number increases the first time i click on the button. I just need to know why the first method didn't work.

I was going to post this as a question to a problem but i later found a 'solution' (if that is what it is) and now this is more like an attempt to understand the situation.

I have a javascript code that displays the number 0 on the screen and then when a button is clicked, the number is supposed to increase according to the amount of times the button is clicked.

This was the code i used initially:

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

});
});

Problem was the button click event only worked AFTER the second click.Meaning i had to click the button twice before the incrementation worked. So i created a function:

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

and then changed the last line of the initial code to:

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

Now the number increases the first time i click on the button. I just need to know why the first method didn't work.

• javascript
• jquery

5 Answers 5

Use ++number instead of number++

number++ increases the value of number afterwards.

You code is running fine, even in the first time. But the value displayed is1 less than the number of the clicks.

You are using prefix increment operator (++counter). In prefix increment operation first the value is evaluated or returned and then incremented.

But in postfix increment operation (counter++) first the value will be incremented and then returned

Use the existing code and initialize the number as 1 and execute the code.

You will get the expected result.

Should you want to maintain the initialization as 0, use postfix increment operator to get the desired result.

My remendation would be not to use either of them but the below one

number += 1;

This is pretty mon in a lot of languages.

var i = 0; 
1 + i++

returns 1

var i = 0; 
1 + ++i

returns 2

The difference is whether the variable is incremented before or after being evaluated in the expression.

Use this

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

HTML is

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

SEE DEMO HERE

 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 pleted. 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 bee's 1. When you click for second time,
    the output :"Number of click": 1 get's printed.