为什么条形图表现得如此奇怪？ html5画布和javascript

Question

首次涉足html5时，我正试图为Farkle游戏制作记分牌。

我已经想出如何为多达五名玩家制作一个看起来很蹩脚但功能强大的图形系统，但我无法弄清楚如何让它更新一次。

我意识到我的代码可能会好得多，但我不想编写辅助函数，直到我确定它是如何工作的。

就像现在一样，我从盒子里得到了奇怪的行为。而不是在总分中添加“计数”，并绘制一个框以反映新分数，它会做一些我不理解的事情。尝试输入10，然后输入90为同一个玩家，看看我的意思。

这是一个“工作”版本，以便您可以看到我的问题。 http://jsfiddle.net/kBJB4/

编辑：好像不是正常添加数字，例如。 1 + 1 = 2，它正在做某种追加物，例如。 1 + 1 = 11。我不明白为什么。

Answer 1

prompt()函数调用返回一个字符串。所以变量tally在以下语句中

var tally = prompt("score?");

实际上是一个字符串。因此，将+运算符应用于字符串操作数和整数操作数会导致将操作数都视为字符串并执行字符串连接而不是整数加法。一个简单的解决方法是将prompt()的返回值转换为整数，如：

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

Answer 2

更新：@Suresh Kumar的回答有点清晰。尽管如此。

您的代码：player1 += tally;将这两个变量视为strings。

使用parseInt强制它使用数字：

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

注意：尝试使用player1 += parseInt(tally);进行快捷操作不起作用，因为它仍然将player1视为string