CODEWITHSUNDEEP
javascriptjquery
Ojonugwa Jude Ochalifu
Ojonugwa Jude Ochalifu

Reputation: 27237

Javascript Integer increment does not work unless called from function

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.

enter image description here

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.

Upvotes: 1

Views: 1886

Answers (5)

Sandeep Pal
Sandeep Pal

Reputation: 2175

 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.

Upvotes: 1

Sarbbottam
Sarbbottam

Reputation: 5570

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 recommendation would be not to use either of them but the below one

number += 1;

Upvotes: 3

Roshan
Roshan

Reputation: 2184

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

Upvotes: 1

Mike Bell
Mike Bell

Reputation: 1386

This is pretty common 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.

Upvotes: 1

int21h
int21h

Reputation: 839

Use ++number instead of number++

number++ increases the value of number afterwards.

Upvotes: 6

Related Questions