-1

I am searching for a reason for why increment operator doesn't increment the numeric value in the place where I set the innerHTML value, like below:

<div id="php"></div>

var a = 14;
document.getElementById("php").innerHTML = a++;//the result will be 14 instead of 15
mina
  • 141
  • 1
  • 10
  • Although personally I use the increment operator, which is OK because I know what I'm doing, and I think that's fine, the suggestions in the question of which this is marked as a duplicate are worth looking at, as a way to avoid the kind of confusion you ran into, including putting the increment statement all by itself on a separate line, or writing `a += 1` instead. Although some purists who reject reading any documentation might object, this [documentation](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment_()) is quite clear. –  Dec 03 '16 at 18:02
  • (cont'd) It says, *the increment operator increments (adds one to) its operand and returns a value. If used postfix, with operator after operand (for example, `x++`), then it returns the value **before** incrementing.* –  Dec 03 '16 at 18:06
  • 1
    @torazaburo:so why in alert(a++) worked fine ,, and in innerHTML returned the value then incremented it !! . – mina Dec 03 '16 at 18:09
  • let's talk about the provided code in the question , try alert(a++) , it will generate the correct value of 15 , but if i used docment.getElementById("php").innerHTML=a++; it will return first the value then increment , so why this didn't happen in alert also (alert the old then increment) – mina Dec 03 '16 at 18:13

3 Answers3

0

Instead of using a++ you can do ++a to get the increment before the variable value assignation:

var a = 14;
document.getElementById("php").innerHTML = ++a;
<div id="php"></div>
Yosvel Quintero
  • 18,669
  • 5
  • 37
  • 46
  • but if i used alert(a++) , it will work fine and the alert will has the new incremented value – mina Dec 03 '16 at 18:01
0

Because you use the postfix increment operator variable++, that means you get the value first and then the variable is incremented.

When you use prefix increment operator ++variable, the variable gets incremented first and then the value is returned.

var a = 42;
console.log(a++); // shows 42, value is 43
console.log(a);   // 43
console.log(++a); // 44
console.log(a);   // 44
Nina Scholz
  • 376,160
  • 25
  • 347
  • 392
  • 1
    but if i used alert(a++) , it will work fine and the alert will has the new incremented value – mina Dec 03 '16 at 18:01
  • @mina, i can not proof that. – Nina Scholz Dec 03 '16 at 18:06
  • @mina It won't. – Lewis Dec 03 '16 at 18:08
  • 1
    If you're going to regurgitate info readily available in any JS documentation, book, or tutorial, which the OP could have found with the most trivial of searches, then at least take the trouble to point to such reference, opine on the pros and cons of using the increment/decrement operator, or add value in some other way. You might also have explicitly disabused the OP of his/her apparent confusion that the behavior they reported had something to do with `innerHTML`. While you're at it, you could also pitch in in the battle to get people to stop using `innerHTML` for plain old text. –  Dec 03 '16 at 18:09
  • @torazaburo, innerHTML is not the problem. it's a minor problem, but even if changed, the problem of the op occurs. – Nina Scholz Dec 03 '16 at 18:20
  • I know. What I was trying to say was, clarify that, since the OP seems to think his/her problem is somehow connected with the involvement with `innerHTML`. –  Dec 03 '16 at 18:21
  • @Lain Even if that turns out to be beyond her, I have full confidence in her ability to write great answers which enhance the value of SO to current and future users. –  Dec 03 '16 at 18:29
0

It does increase the variable, however it writes to the innerHTML then increments the value, You could use ++a which will increase the value before it writes to the innerHTML.

var a = 14
var b = 14
console.log('before a', a)
document.getElementById("test1").innerHTML = a++
console.log('after a', a)

console.log('before b', b)
document.getElementById("test2").innerHTML = ++b
console.log('after b', b)
<div id="test1"></div>
<div id="test2"></div>
synthet1c
  • 6,152
  • 2
  • 24
  • 39