键盘功能没有更改输入框？

Question

我正在尝试创建一个简单的表单，该表单可以计算一些字段并将总价格计算为单位成本*数量。 我试图使用键入功能自动根据输入的单价更改来更改单价，但是当我更改价格时，什么也没发生。

HTML

 <!-- Div for quantity -->
                <div class="form-group">
                    <input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity" required>
                </div>
                <!-- Div for unit price -->
                <div class="form-group">
                    <input type="number" class="form-control" id="unitPrice" name="unitPrice" placeholder="Unit Price" required>
                </div>
                <!-- div for cost -->
                <div class="form-group">
                    <input type="number" class="form-control" id="cost" name="cost" placeholder="Cost" required>
                </div>

JS

$(document).ready(function () {
    $("#unitPrice").keyup(function () {
        var quantity = +$("#quantity").val();
        var price = +$("#unitPrice").val();
        $("#cost").val(quantity * unitPrice);
    });
});

}）;

Answer 1

这是一个错字。 更改

$("#cost").val(quantity * unitPrice);

至

$("#cost").val(quantity * price);

Answer 2

这是一个可行的解决方案。 您的变量名称是

价钱

非单价

。希望能帮助到你！

  $(document).ready(function () { $("#unitPrice").keyup(function () { var quantity = +$("#quantity").val(); var price = +$("#unitPrice").val(); $("#cost").val(quantity * price); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <div class="form-group"> <input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity" required> </div> <!-- Div for unit price --> <div class="form-group"> <input type="number" class="form-control" id="unitPrice" name="unitPrice" placeholder="Unit Price" required> </div> <!-- div for cost --> <div class="form-group"> <input type="number" class="form-control" id="cost" name="cost" placeholder="Cost" required> </div> 

Answer 3

您使用了错误的变量名。 替换此行

$("#cost").val(quantity * unitPrice);

同

$("#cost").val(quantity * price);