Почему гистограммы действуют так странно? html5 canvas и javascript

Question

Для моего первого выхода в html5 я пытаюсь сделать табло для игры Farkle.

Я понял, как создать хромую, но функциональную графическую систему для пяти игроков, но не могу понять, как сделать так, чтобы она обновлялась более одного раза.

Я понимаю, что мой код мог бы быть намного лучше, но я не хотел писать вспомогательные функции, пока не был уверен, как он будет работать.

Как сейчас, я получаю странное поведение из коробок. Вместо добавления «подсчета» к общему баллу и рисования прямоугольника, отражающего новый балл, он делает то, чего я не понимаю. Попробуйте ввести 10, а затем 90 для того же игрока, чтобы понять, что я имею в виду.

Вот «рабочая» версия, чтобы вы могли увидеть мою проблему. http://jsfiddle.net/kBJB4/

edit: Кажется, что вместо добавления чисел обычно, например. 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