javascript - 如何在 javascript 上添加基本输入折扣

Question

这是我想要创建此表单的代码，如果您输入所有信息，如价格、数量和折扣百分比，并显示折扣金额、小计和总计因为折扣金额是 %discount 除以 100，然后乘以小计。小计是用价格乘以数量得出的。总数是通过将小计乘以折扣得出的，如您所见，我已经完成了表格，并且我几乎拥有 javascript 上的所有代码，但似乎我无法使其与折扣一起使用。请帮忙 !

JS:

$('#CAT_Custom_490527').keyup(function () {
    var quantity = $("#CAT_Custom_490527").val();
    var iPrice = $("#CAT_Custom_490526").val();
    var subtotal = quantity * iPrice;
    $("#CAT_Custom_491101").val(subtotal);
    var x = $("#CAT_Custom_491074").val();
    var y = 100
    var division = x / y
    var multi = division * subtotal
    $("CAT_Custom_491074").val(division);
    var total = subtotal * multi;
    $("#CAT_Custom_490531").val(total);
    // sets the total price input to the quantity * price
});

HTML:

<tr>
    <td>
        <label for="CAT_Custom_490526">Precio <span class="req">*</span>
        </label>
        <br />
        <input type="text" maxlength="255" name="CAT_Custom_490526" id="CAT_Custom_490526" class="cat_textbox" />
    </td>
</tr>
<tr>
    <td>
        <label for="CAT_Custom_490527">Cantidad <span class="req">*</span>
        </label>
        <br />
        <input type="text" maxlength="255" name="CAT_Custom_490527" id="CAT_Custom_490527" class="cat_textbox" />
    </td>
</tr>
<tr>
    <td>
        <label for="CAT_Custom_491074">%Descuento</label>
        <br />
        <input type="text" maxlength="255" name="CAT_Custom_491074" id="CAT_Custom_491074" class="cat_textbox" />
    </td>
</tr>
<tr>
    <td>
        <label for="CAT_Custom_491218">Descuento</label>
        <br />
        <input type="text" maxlength="255" name="CAT_Custom_491218" id="CAT_Custom_491218" class="cat_textbox" />
    </td>
</tr>
<tr>
    <td>
        <label for="CAT_Custom_491101">Subtotal</label>
        <br />
        <input type="text" maxlength="255" name="CAT_Custom_491101" id="CAT_Custom_491101" class="cat_textbox" />
    </td>
</tr>
<tr>
    <td>
        <label for="CAT_Custom_490531">Total <span class="req">*</span>
        </label>
        <br />
        <input type="text" maxlength="255" name="CAT_Custom_490531" id="CAT_Custom_490531" class="cat_textbox" />
    </td>
</tr>

Answer 1

我看到的问题点:

1. 数学不正确(感谢 answer by krb686 - 请为该答案点赞，因为它很有帮助)
2. 选择器中的拼写错误 - 缺少 #(感谢 answer by Kundan Singh Chouhan - 请为该答案点赞，因为它很有帮助)
3. 更正上面的拼写错误后，您现在将覆盖折扣百分比。我打赌你的意思是将其用于折扣值字段:#CAT_Custom_491218。如果您使用有意义的 ID 而不是自动生成的 ID，这将更容易提前检测到。
4. 您仅在数量字段更改时评估此功能。例如，如果您更改折扣百分比，则不会重新计算小计和总计。
5. 您只关注键盘事件。如果仅使用鼠标更改了值(复制/粘贴或拖/放)，则不会重新评估小计和总计。还处理 oninput(html5 的新事件)和 onchange。

要绑定(bind)到所有输入并检测比keyup更多的事件:

$("input").on("input keyup change", function () {
    ...

Demo with all the above changes applied