-2

I asked this question previously and it got redirected (and treated as answered) to this question - "Adding two numbers concatenates them instead of calculating the sum".

But it did not help me solve it, I did try parseInt, Number(), and putting + in front of my number.

So here is my question again, but before I think I need to specify that I am using +=, not just +.

I used this function to add 5 to a number in a p element:

function add5() {lifeTotal.textContent += 5;}

I have a similar function that subtracts 5 to that same number:

function minus5() {lifeTotal.textContent -= 5;}

Now my problem is that while the subtracting function works as expected, the adding one just puts 5 at the right side of the number. So if the number was 10, it would return 105, as if both numbers were actually strings and not numbers... while the subtracting function works normally and treats numbers as numbers...

It turns me crazy. I just learnt this += thing and I really don't think I used it wrong...

So my solution is to instead use ++ five times, like so:

function add5() {lifeTotal.textContent ++; lifeTotal.textContent ++; lifeTotal.textContent ++; lifeTotal.textContent ++; lifeTotal.textContent ++;}

It works, but it seems to me this is not the shortest way to write this.

The app I am writing is adding or subtracting by calling the corresponding function with an onclick="function()" in html button tags.

What is happening? What is the shortest way to write this?

Thanks!

Jean-Yves TRAN
  • 7
  • Does `lifeTotal.textContent = +lifeTotal.textContent + 5` work? – aerial Dec 21 '21 at 11:47
  • wahou! Thanks, it works! I just don't understand why JS is behaving like this when the use of -= is so much more straightforward. Anyway, I learnt something new! I would really appreciate it if someone could explain to me what is happening and why I need to use an = with a + in front of my Var. Thanks a lot! – Jean-Yves TRAN Dec 21 '21 at 12:54
  • I got an explanation here from the original question, thanks to @PeterB : + exists on string values and then it mean concatenation, so that is what happens. - is not defined on strings, but it is on numbers, so the string is converted to a number and then the numeric subtraction is applied. The end result is placed in the textContent property of what looks to be a DOM element, which can only store strings, so the numeric result of the subtraction is then stored again as a string value. – Peter B – Jean-Yves TRAN Dec 21 '21 at 13:05
  • I assume that the + in front of my Var lifeTotal is converting the DOM content targeted by the .textContent to a number, which let JS see 2 numbers instead of a string and the number 5. – Jean-Yves TRAN Dec 21 '21 at 13:05

1 Answers1

0

Thanks to @aerial301 for this answer:

lifeTotal.textContent = +lifeTotal.textContent + 5

It works. I assume that the + in front of my Var lifeTotal is converting the DOM content targeted by the .textContent to a number, which let JS see 2 numbers instead of a string and the number 5.

Jean-Yves TRAN
  • 7
  • This will work. You might consider trying to store a number in `lifeTotal.textContent` in the first place -- currently a string is stored. I would translate to a number immediately when first stored -- and then use it as a number from that point on. – ariels Dec 21 '21 at 13:16