0

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

我设法在keyup该数字文本框中调用了一个函数，该函数进行了一个小计算，例如：UnitPrice * Quantity，并用该计算的结果填充另一个文本框。

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

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

我尝试将以下几行添加到我的 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>

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

更新

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

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));
            }
        }
        }
        });

资源

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

4

0 回答 0