jQuery adding a number to text

Question

I am trying to do something I though would be really simple. add the value of 1 to a number.

However the number was plain text and things are getting a little confusing. As you may be able to guess, I am fairly new to this.

My goal is to add 1 point to an existing score, the score has one decimal place, eg 1.3. So the desired result after adding a point is 2.3. However The current script I wrote is returning adds a point to the second decimal place and I don't understand why.

Thanks for the help.

var getPoints = parseInt($('.awesome-points').text(), 10).toFixed(1);
alert(getPoints);
var addPoint = 1;
var newScore = getPoints + addPoint;
$('.awesome-points').text(newScore);

Mark

Community · Accepted Answer · 2017-05-23 10:09:00Z

9

.toFixed() returns a string (see the MDN documentation), that's why getPoints + addPoint performs string concatenation, not addition.

Call that method after you performed the addition:

// unary + converts any numerical string to a number (no matter whether float
// or int)
var getPoints = +$('.awesome-points').text();
var newScore = getPoints + 1;
$('.awesome-points').text(newScore.toFixed(1));

Or more concise :

$('.awesome-points').text(function(i, val) {
    return (+val + 1).toFixed(1);
});

How this works:

Instead of passing a value to .text(), you can pass a function. This function will be executed for each of the selected elements. The first argument passed to the function is the index of the element in the set of selected elements and the second argument is the current text content. The return value will be set as new text content.
This is a good way to read and write the text content, without invoking .text() twice.

(+val + 1).toFixed(1) is evaluated as follows: First val is converted to a number through the unary plus (+val) and then increased by one (+ 1). .toFixed(1) is called on the result of that operation.

+val will return NaN if the text cannot successfully be converted into a number. I assume this won't happen in your case, but this can easily be dealt with with the expression

return ((+val || 0) + 1).toFixed(1);

That means, in case +val evaluates to false (which includes NaN), we use 0 instead. It's a common pattern in JavaScript, see also What does "options = options || {}" mean in Javascript?.

edited May 23, 2017 at 10:09

CommunityBot

11 silver badge

answered May 12, 2012 at 0:00

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Fabrício Matté Over a year ago

Uh, the question wasn't very clear so I just had to re-read it another 3 times after your answer lol. I still don't know exactly what OP wants, but seeing as he probably wants something different than the string which is being returned I'll + your answer. :P

Felix Kling Over a year ago

I just don't think that anyone wants to perform string concatenation with a score ;) But I agree, the question is not very well formulated.

Fabrício Matté Over a year ago

Eeeeh good logic :) Even though you never know what kind of games people are making nowadays. :P

Sampson Over a year ago

Didn't know .toFixed returned a string. Troubling, but worth an upvote ;)

ajax333221 Over a year ago

even best if you add protection to non-numbers turning them to 0, example +x||0

|

Ricardo Garza V. · Accepted Answer · 2012-05-12 01:33:31Z

0

i think what you want is something like this

var getPoints = $('.awesome-points').text();
//alert(getPoints);
var addPoint = 1;
var newScore = parseFloat(getPoints) + addPoint;
$('.awesome-points').text(newScore.toFixed(1));

seems that was your answer, toFixed() turns a numerical value into a string so by making the toFixed function later in your process

answered May 12, 2012 at 1:33

Ricardo Garza V.

9091 gold badge11 silver badges26 bronze badges

Collectives™ on Stack Overflow

jQuery adding a number to text

2 Answers 2

15 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related