Question

我正在尝试学习JavaScript。我使用Telerik的数字文本框来设置数量，这将在我的JavaScript代码中使用。

我设法调用该数字文本框的keyup上的函数，该函数执行一个小的计算，如：UnitPrice * Quantity，并使用此计算结果填充另一个文本框。

由于它是一个数字文本框，因此它上面有增加和减少按钮。（见下文） Numeric TextBox

我的代码在手动修改值时有效，但在使用向上和向下按钮增大或减小值时它不起作用。

我尝试将以下行添加到我的Javascript代码中，但这会阻止数字文本框的工作。（使用按钮增加和减少时没有任何反应。）

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

和

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

接下来是我手动更新时的Javascript代码：

<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>

该页面的HTML如下：

<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>

当按下增加或减少按钮时，我可以使用什么事件来进行计算更新？或者有不同的方法来实现这一目标吗？

更新

我读到可以在HTML中使用oninput事件来获得增加和减少，所以我添加了以下代码：

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

问题是代码仍然不仅通过手动更改号码来调用。

使用Javascript处理数字更改事件

0 个答案: