Javascript Count numbers

Question

This probably is a very easy solution, but browsing other questions and the internet did not help me any further.

I made a javascript function which will give me a random value from the array with its according points:

function random_card(){
    var rand = Math.floor(Math.random()*cards.length);
    var html = "card: "+cards[rand][0]+"<br/>points: "+cards[rand][1]+"<br/><br/>";
    document.getElementById("Player").innerHTML += html;
    var punten = cards[rand][1];
    document.getElementById("Points").innerHTML += punten;
}

I've added a += punten so i can see that it works correctly. It shows me all the point in the div with the id Points.

But what i wanted to do is count it all together so if i were to draw a 4, King and a 10 it should show 24 instead of 41010.

Thanks in advance! And if you're missing any information please let me know

Mark Walters · Accepted Answer · 2014-02-19T10:04:54.673

4

Currently you are just adding strings together, which concatenate (join together) hence why you end up with 41010. You need to grab the current innerHTML (total) and use parseInt() to convert from a string to a number, then add your new cards that have been chosen, then assign this new value to the innerHTML of your element.

Try the following

function random_card(){
    var rand = Math.floor(Math.random()*cards.length);
    var html = "card: "+cards[rand][0]+"<br/>points: "+cards[rand][1]+"<br/><br/>";
    document.getElementById("Player").innerHTML += html;
    var punten = cards[rand][1];

    var curPoints = parseInt(document.getElementById("Points").innerHTML, 10) || 0;
    var total = curPoints + parseInt(punten, 10);
    document.getElementById("Points").innerHTML = total;
}

More info on parseInt() here

EDIT

I've added this line -

var curPoints = parseInt(document.getElementById("Points").innerHTML, 10) || 0;

Which will try and convert the innerHTML of the "Points" div, but if it is empty (an empty string converts to false) then curPoints will be equal to 0. This should fix the issue of the div being blank at the start.

edited Feb 19 '14 at 10:04

answered Feb 19 '14 at 09:36

Mark Walters

12,060
6
33
48

1

Please provide an explanation. Thanks! – Dropout Feb 19 '14 at 09:38
1

Updated answer to include a simple explanation, thanks – Mark Walters Feb 19 '14 at 09:39
2

It's probably a good idea to pass in a radix as the second argument to `parseInt()` to avoid unexpected behaviour that might occur based on the first argument. – Kemal Fadillah Feb 19 '14 at 09:40
Updated again, overlooked that, Thanks @KemalFadillah – Mark Walters Feb 19 '14 at 09:41
Using this code, it shows me NaN were the number should appear, the explanation seem clear. – Déjà vu Feb 19 '14 at 09:42
Does the element "Points" contain any HTML or anything other than the text you have been appending (the card points). `parseInt()` or converting to a number will result in `NaN` (Not a Number) if it cannot convert what it finds to a number. – Mark Walters Feb 19 '14 at 09:45
No it was an empty div with the id Points, I tried making a label with the id points but no luck. Points is absolutely empty except for the points thats going to be written inside. – Déjà vu Feb 19 '14 at 09:49
The error is in the line I added starting with `var total = `. Try logging or alerting each number seperately, the innerHTML that i've converted and then also the `punten` variable to check which one is converting to `NaN`. One of them isn't in a format that can be converted to a number which is causing the addition to fail. Let me know how you get on. – Mark Walters Feb 19 '14 at 09:52
I don't exactly know what you mean but i've added an alert with total after the var total line, and it shows me a NaN alert for each card i draw. The alert with punten will show me alerts with the correct points however. – Déjà vu Feb 19 '14 at 09:55
Ok i know what the issue is. First time your draw a card the innerHTML of "Points" will be empty or "" (an empty string), which can't be converted to a number, resulting in your `NaN` number. A simple `if` statement will fix this, i'll amend the answer for you to try. – Mark Walters Feb 19 '14 at 10:02
Thanks! You fixed it. But just out of curiousity. I can also just add a 0 inside the points div right? What makes the curpoints better? – Déjà vu Feb 19 '14 at 10:06
Either will work. The `curPoints` is just a simple check which means you won't have to add anything to the "Points" div. If you want any explanations on this statement, I used the `||` or "OR" operator. have a look here for a better explanation - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators – Mark Walters Feb 19 '14 at 10:11
Another not really question related question, is there a way to retrieve the var total in another function. Or is it better to just retrieve it from the getelementbyid points again. To add functions to it if total is over 21 for example? – Déjà vu Feb 19 '14 at 10:20
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47838/discussion-between-mark-walters-and-farewyth) – Mark Walters Feb 19 '14 at 10:28

score 0 · Answer 2 · edited May 23 '17 at 11:49

innerHTML is a string and JavaScript uses + for both string concatenation as numeric addition.

var pointsInHtml = parseInt(document.getElementById("Points").innerHTML, 10); 
pointsInHtml += punten;
document.getElementById("Points").innerHTML = punten;

The second parameter 10 of the parseInt method is usually a good idea to keep there to avoid the function to parse it as an octal.

It might be easier to keep a points variable and only at the end put it in the #Points container, that would make the parseInt no longer necessary

score 0 · Answer 3 · answered Feb 19 '14 at 09:39

innerHTML will be a string, so you need to convert it into an integer prior to adding the card value :)

function random_card(){
    var rand = Math.floor(Math.random()*cards.length);
    var html = "card: "+cards[rand][0]+"<br/>points: "+cards[rand][1]+"<br/><br/>";
    document.getElementById("Player").innerHTML += html;
    var punten = cards[rand][1],
        curPunten = parseInt(document.getElementById('Points').innerHTML);
    document.getElementById("Points").innerHTML = curPunten + punten;
}

No problems, from the agreed answer it looks like the original innerHTML was an empty string :) Glad you've got it sorted — PeteAUK, Feb 19 '14 at 10:21

Javascript Count numbers

3 Answers3