CODEWITHSUNDEEP
javascriptaddition
IAG
IAG

Reputation: 31

Post increment and addition

I don't understand why in this example addition doesn't work:

<button id="button">Click</button>
<p id="counter"></p>

function handler(){
    var button = document.getElementById('button'),
    count = document.getElementById('counter'); // 
    count.textContent = 0;


    button.onclick = function(){
    count.textContent++; //Why this works

    //but this does not
    //count.textContent + 1;  

    console.log(typeof count.textContent); // Why is a string?
    }

}

window.onload = handler;

And why (typeof count.textContent) is a string?

Upvotes: 2

Views: 933

Answers (5)

Matt Burland
Matt Burland

Reputation: 45155

textContent as the name suggests is a string. When you do this (and actually assign the value to something):

count.textContent = count.textContent + 1;

Javascript will interpret this as a string + a number and, since + is the concatenation operator for strings, it will convert the number to a string and then stick them together. So you get:

"0" + "1" = "01"

When you do this:

count.textContent++;

The ++ operator isn't defined for strings, but it is for numbers. So javascript will (attempt to) convert your string to a number, increment it and then convert it back to a string and store it back in count.textContent

The equivalent statement would be something like:

count.textContent = parseInt(count.textContent,10) + 1;

Upvotes: 1

ckersch
ckersch

Reputation: 7687

They are different operators.

++X is the increment operator. It functions by adding one to X, and then returning the current value of X. You can read it as 'Add one to X, then return X.

The increment operator can also come after something. X++ will return the current value of X, and then increment it.

+ is the addition operator. It does not modify the values of the things it is used on. X + Y could be read as 'return the value of X + Y. It does not modify either argument. It is also commutative, so X+Y === Y+X' whenXandY` are both numbers.

They also have different behavior when used on strings. + will concatenate strings, so 'foo' + 'bar' === 'foobar'. ++ is not defined for strings, so it will throw an error, or it will coerce the value it's given into a number.

element.textContent is a property that returns as a string. If you use this:

element.textContent++;

The value will be coerced into a number, increased by one, and the value after that will be returned. (Right now, you aren't doing anything with the return value)

If you use this:

element.textContent + 1;

The statement will return a string: '01'.

Again, you aren't setting anything to this, and + doesn't change the arguments. Javascript, by default, will try to coerce to the left argument (X in X + Y), so 1 + '0' === 1 and '1' + 0 === '10'.

Upvotes: 0

AmanVirdi
AmanVirdi

Reputation: 1685

This will only work, If written like this:

   count.textContent = parseInt(count.textContent) + 1;

count.textContent++ store the value in count.textContent after incrementing.

But In case of count.textContent + 1, it is required to store the incremented value in some variable;

Upvotes: 2

ltalhouarne
ltalhouarne

Reputation: 4636

count.textContent++; //Why this works

The above line is equivalent to count.textContent = count.textContent +1; It also parses the variable as a numeric one.

Whereas the below one is only a statement on a String:

//count.textContent + 1;

So you need to use the following:

count.textContent = parseInt(count.textContent) + 1

Upvotes: 2

Evan Kennedy
Evan Kennedy

Reputation: 4185

For the first part of the question, count.textContent + 1 is a statement returning 1 plus the current value. It does not modify the content.

count.textContent++ modifies the content and returns the unmodified number.

count.textContent = count.textContent + 1 would modify the content and return the modified number which is equivalent to ++count.textContent.

For the second part of the question, an element's textContent is always a string. By using an addition (+) operator, you are casting string "0" to number 0 and then modifying the resulting number.

Upvotes: 0

Related Questions