JQuery не обновляет значения после некоторой математики

Question

Я пытаюсь написать помощника по созданию персонажей для настольной игры.В зависимости от уровня персонажа, количество очков развития, которые игрок может инвестировать, меняется.Это мой первый крупный проект в html5 и jQuery, но я подумал, что это будет достаточно просто.Я использовал совет из этого вопроса , но мои значения не обновляются.Я крутился с ним в jsFiddle, но безрезультатно.Я в своем уме!Вот ссылка на мою jsFiddle .У jsFiddle есть только соответствующие фрагменты кода, с которыми я хочу работать.Остальная часть формы работает.

HTML:

<strong>Level: </strong><input id="levelselect" type="number" min="0" max="20" />
You have <span id="DP"></span> DP to spend.

JS:

function calcDP() {
        var level = parseInt($('#levelselect').val(),10);
        var DPatZero = 400;
        var DPatOne = 600;
        var workDP = 0;

            if (level === 0){
                workDP = DPatZero;
            }
            else if(level == 1){
                workDP = DPatOne;
            }
            else {
                workDP = DPatOne + (level * 100);
            }
            var DP = workDP;

            $('#DP').text(DP);
        }

$('#levelselect').on('keydown keyup keypress', calcDP);

Answer 1

Вы связали события не с тем элементом.Используйте

$('#levelselect').on('keydown keyup keypress', calcDP);

вместо

$('#DP').on('keydown keyup keypress', calcDP);

, и оно будет работать.

Answer 2

Сначала вы привязали селектор к неправильному элементу. Вместо привязки событий на

$('#DP')

вы должны связать их с

$('#levelselect')

Во-вторых, вы хотите перехватить каждое событие, используйте для этого событие «изменение», чтобы убедиться, что перехватываются не только нажатия клавиш, но и вставки и нажатия стрелок вверх и вниз рядом с вводом: 1007 *

function calcDP()
{
    var level = parseInt($('#levelselect').val(), 10);
    var DPatZero = 400;
    var DPatOne = 600;
    var workDP = 0;

    if (level === 0)
    {
        workDP = DPatZero;
    }
    else if (level == 1)
    {
        workDP = DPatOne;
    }
    else
    {
        workDP = DPatOne + (level * 100);
    }

    $('#DP').text(workDP);
}

$(document).ready(function()
{
    // Bind calcDP onchange to make sure every event is being caught.
    $('#levelselect').on('change', calcDP);

    // Call the onchange event to make sure the current value is evaluated
    $('#levelselect').change();
}

Кроме того, в вашем начальном JSfiddle вы использовали Mootools в качестве необходимого каркаса слева вместо jQuery.

Полный сценарий см. В JS fidle: http://jsfiddle.net/9M4cD/4/