CODEWITHSUNDEEP
javascriptjquery
Bluedayz
Bluedayz

Reputation: 599

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

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?

Upvotes: 1

Views: 308

Answers (3)

Slaven Tomac
Slaven Tomac

Reputation: 1550

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().

Upvotes: 3

tomysshadow
tomysshadow

Reputation: 932

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();

Upvotes: 1

Bucket
Bucket

Reputation: 7521

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).

Upvotes: 1

Related Questions