Handle on numeric changed event using Javascript

Question

I am trying to learn JavaScript. I use a numeric textbox from Telerik for setting a quantity, that will be used in my JavaScript code.

I managed to call a function on keyup of that numeric textbox, the function does a small calculation like: UnitPrice * Quantity, and fills another textbox with the result of this calculation.

Since it is a numeric textbox, it has an increase and decrease button on it.(See below)

My code works when modifying the value manually, but it doesn't work when increasing or decreasing the value with the up and down buttons.

I tried adding the following lines to my Javascript code, but that stops the numeric textbox from working.(nothing happens on increasing and decreasing using buttons.)

$("#@Html.FieldIdFor(model => model.Quantity)").onclick(OnQuantityChanged);

And

$("#@Html.FieldIdFor(model => model.Quantity)").onchange(OnQuantityChanged);

Next is my Javascript code that works when updating manually:

<script type="text/javascript">
    $(document).ready(function ()
    {
        //Call OnQuantityChanged, when page has been refreshed.
        OnQuantityChanged();
        //Call OnQuantityChanged, on keyup event.
        $("#@Html.FieldIdFor(model => model.Quantity)").keyup(OnQuantityChanged);
    });

    //OnQuantityChanged event, multiplies quantity by unitPrice INCL. and unitPrice EXCL. for filling total value INCL. and EXCL.
    function OnQuantityChanged()
    {
        var quantity = parseInt(document.getElementById("@Html.FieldIdFor(model => model.Quantity)").value);
        if (quantity != null)
        {
            var unitPriceInclTax = parseFloat(document.getElementById("@Html.FieldIdFor(model => model.UnitPriceInclTax)").value);
            var unitPriceExclTax = parseFloat(document.getElementById("@Html.FieldIdFor(model => model.UnitPriceExclTax)").value);
            var SubTotalInclTax = String(quantity * unitPriceInclTax);
            var SubTotalExclTax = String(quantity * unitPriceExclTax);
            if (SubTotalInclTax != null)
            {
                @*document.getElementById("@Html.FieldIdFor(model => model.SubTotalInclTax)").value = String(SubTotalInclTax);*@
                $("#@Html.FieldIdFor(model => model.SubTotalInclTax)").val(String(Math.round(SubTotalInclTax*1000) / 1000));
            }
            if (SubTotalExclTax != null)
            {
                @*document.getElementById("@Html.FieldIdFor(model => model.SubTotalExclTax)").value = String(SubTotalExclTax);*@
                $("#@Html.FieldIdFor(model => model.SubTotalExclTax)").val(String(Math.round(SubTotalExclTax * 1000) / 1000));
            }
        }
    }
</script>

The HTML of that page is below:

<table>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.UnitPriceInclTax):
                </td>
                <td>
                    @Html.HiddenFor(model => model.UnitPriceInclTax)@Model.UnitPriceInclTax
                </td>
            </tr>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.UnitPriceExclTax):
                </td>
                <td>
                    @Html.HiddenFor(model => model.UnitPriceExclTax)@Model.UnitPriceExclTax
                </td>
            </tr>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.Quantity):
                </td>
                <td colspan="2">
                    @Html.EditorFor(model => model.Quantity)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.SubTotalInclTax):
                </td>
                <td>
                    @Html.TextBoxFor(model => model.SubTotalInclTax, new { style="width:137px"})
                </td>
            </tr>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.SubTotalExclTax):
                </td>
                <td>
                    @Html.TextBoxFor(model => model.SubTotalExclTax,  new { style="width:137px" })
                </td>
            </tr>
        </table>

What event can I use to make the calculation update when the increase or decrease button is pressed? Or is there a different way to achieve this?

Update

I read that the oninput event can be used in HTML for getting the increase and decrease, so I added following code:

var quantityInput = document.getElementById("@Html.FieldIdFor(model => model.Quantity)");
        quantityInput.oninput = function()
        {
            alert("i got called, yay");
            var quantity = parseInt(document.getElementById("@Html.FieldIdFor(model => model.Quantity)").value);
            if (quantity != null) {
                var unitPriceInclTax = parseFloat(document.getElementById("@Html.FieldIdFor(model => model.UnitPriceInclTax)").value);
            var unitPriceExclTax = parseFloat(document.getElementById("@Html.FieldIdFor(model => model.UnitPriceExclTax)").value);
            var SubTotalInclTax = String(quantity * unitPriceInclTax);
            var SubTotalExclTax = String(quantity * unitPriceExclTax);
            if (SubTotalInclTax != null) {
                @*document.getElementById("@Html.FieldIdFor(model => model.SubTotalInclTax)").value = String(SubTotalInclTax);*@
                $("#@Html.FieldIdFor(model => model.SubTotalInclTax)").val(String(Math.round(SubTotalInclTax * 1000) / 1000));
            }
            if (SubTotalExclTax != null) {
                @*document.getElementById("@Html.FieldIdFor(model => model.SubTotalExclTax)").value = String(SubTotalExclTax);*@
                $("#@Html.FieldIdFor(model => model.SubTotalExclTax)").val(String(Math.round(SubTotalExclTax * 1000) / 1000));
            }
        }
        }
        });

Source

Problem is that code still isn't only called by changing number manually.