Why Are Bar Graphs Acting So Strangely? Html5 Canvas, And Javascript

For my first foray into html5, I'm trying to make a scoreboard for the game Farkle. I have figured out how to make a lame looking but functional graph system for up to five players

Solution 1:

The prompt() function call returns a string. So the variable tally in the following statement

var tally = prompt("score?");

is actually a string. So applying + operator to a string operand and an integer operand results in treating both the operands as string and performing string concatenation instead of integer addition. A simple fix is to convert the return value of prompt() to integer like:

var tally = parseInt(prompt ("Score?"));

Solution 2:

Update: @Suresh Kumar's answer is a bit cleaner. Leaving mine up though.

Your code: player1 += tally; is treating both variables as strings.

Use parseInt to force it to use numbers:

player1 = parseInt(player1) + parseInt(tally);

Note: Trying to shortcut this with player1 += parseInt(tally); doesn't work, because it's still treating player1 as a string