jQuery: Content of html element is interpreted as a string, not an integer

Question

When somebody is liking a comment on my website, a "1" is added at the right of the number where the amount of likes are shown, but when they click dislike, it does correct math.

For example:

14 + 1 = 141
14 - 1 = 13

jQuery

var elem   = $('.like_button'), //Like button
    num    = $('.num_likes'), //Get the element: number of likes
    oldnum = num.html(); //Number of likes

if(elem.html() == "Like") {
    elem.html("Dislike");
    num.html(oldnum+1); //Adds one like after liking it
} else {
    elem.html("Like");
    num.html(oldnum-1); //Deletes one like after disliking it
}

I really wonder why disliking works but liking not.

Why does javascript interpret the value of the num element as a string, even though it is a number? Any tips for me?

- is only a numeric operator (you can't subtract strings), so javascript coerces oldnum to be a number. + works with both numbers and strings, so javascript coerces the second operand (the 1) to a string, since that matched oldnum. — garlon4
– garlon4, Commented May 2, 2014 at 19:57
you've got to convert oldnum to integer. parseInt(oldnum,10) should do the trick — Sam Miller
– Sam Miller, Commented May 2, 2014 at 19:57

Bucket · Accepted Answer · 2018-02-27 14:57:20Z

3

Because JavaScript interprets num.html() as text. The + sign for string in javascript means concatenation, but - doesn't mean that so in that case javascript realizes you want to do numeric calculation. That's why it works with -

You should cast oldnum to an integer with parseInt().

edited Feb 27, 2018 at 14:57

Bucket

7,5599 gold badges38 silver badges48 bronze badges

answered May 2, 2014 at 19:57

Slaven Tomac

1,5722 gold badges27 silver badges39 bronze badges

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

6 Comments

user77838 Over a year ago

As a (sad) fact, yeah: in javascript the string concatenation and the addition operators are both expressed with '+'. That's not the case in many other languages, such as php,lua..

dgvid Over a year ago

And you can parse oldnum into a number like so: oldnum = parseInt(num.html(), 10);

Bluedayz Over a year ago

Why the "10" in parseInt? What does it stand for?

Slaven Tomac Over a year ago

That's radix. From w3 schools: If the radix parameter is omitted, JavaScript assumes the following: If the string begins with "0x", the radix is 16 (hexadecimal) If the string begins with "0", the radix is 8 (octal). This feature is deprecated If the string begins with any other value, the radix is 10 (decimal)

Slaven Tomac Over a year ago

Depends what you want. Number will say NaN in case if you try Number('10px'), but parseInt will return 10. I would say Number is more strict...

|

Bucket · Accepted Answer · 2014-05-02 19:57:23Z

1

You need to cast oldnum to a number:

if(elem.html() == "Like") {
    elem.html("Dislike");
    num.html(Number(oldnum)+1); //Adds one like after liking it
} else {
    elem.html("Like");
    num.html(Number(oldnum)-1); //Deletes one like after disliking it
}

Alternatively, +oldnum does the same thing as Number(oldnum).

answered May 2, 2014 at 19:57

Bucket

7,5599 gold badges38 silver badges48 bronze badges

2 Comments

Bluedayz Over a year ago

What do you mean with +oldnum? num.html(+oldnum) ?

Bucket Over a year ago

Instead of num.html(Number(oldnum)+1), you can use num.html((+oldnum)+1).

tomysshadow · Accepted Answer · 2014-05-03 00:23:10Z

Javascript is interpreting the text on your page as a string. This is because that's what text on a page normally is. Take for example:

<span id="berliner">I am a jelly donut.</span>
<script LANGUAGE="Javascript">
document.getElementById("berliner").innerHTML;
// it only makes sense that this be a string, right?
</script>

Now, in JS, you use the + sign for two things: adding numbers, or putting one string after another.

var addingnumbers = 1+1;
// adding numbers, what you want
var a = "I am";
var b = " a jelly donut";
var addingstrings = a+b;
// adding strings, which you don't want.

As such, the html was interpreted as a string like it normally should be, but in this case shouldn't be. And adding the string to the other string just appended it to the end, rather than doing math. There is an easy solution: convert the innerHTML to a number by multiplying it by 1. Multiplying can't be done to a string, so JS will change it to number form, prepping it to be added to something else.

var oldnum = num.html()*1; // done! The multiplying has changed it to a number.

And if you ever do want to change it back to a string, you can do the reverse with the toString() function.

var aNumberToStartOutWith = 3;
var aStringToEndOffWith = aNumberToStartOutWith.toString();

Collectives™ on Stack Overflow

jQuery: Content of html element is interpreted as a string, not an integer

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related