计算数量 * 价格 = 总计 |总计 / 价格 = 数量答案

【问题标题】：Calculate Quantity * Price = Total | Total / Price = Quantity计算数量 * 价格 = 总计 |总计 / 价格 = 数量
【发布时间】：2017-11-24 14:22:21
【问题描述】：

我需要一些帮助。

我希望 "Total" 由 "quantity * price = total" 计算（目前还可以）。问题是我还需要 "Quantity" 由 "total / price = quantity" 计算，即如果一个字段更改，另一个字段将自动更改。

我做了一个很简单的示例代码：JSFiddle

//Value of Price (Hidden)
$('#price').val(31245);

//Calculation
var qty=$("#qty");
qty.keyup(function(){
    var total=isNaN(parseInt(qty.val()* $("#price").val())) ? 0 :(qty.val()* $("#price").val())
    $("#total").val(total);
});
var total=$("#total");
total.keyup(function(){
    var qty=isNaN(parseInt(total.val()/ $("#price").val())) ? 0 :(total.val()/ $("#price").val())
    $("#qty").val(qty);
});

//Mask Total input
var originalVal = $.fn.val;

$.fn.val = function(value) {
    if (typeof value == 'undefined') {
        return originalVal.call(this);
    } else {
        setTimeout(function() {
            this.trigger('mask.maskMoney');
        }.bind(this), 100);
        return originalVal.call(this, value);
    }
};

$('#total').maskMoney();

$('#total').on('click mousedown mouseup focus blur keydown change input', function(event) {
    console.log('This Happened:'+ event.type);
});

其中第一部分 “数量 * 价格 = 总计” 可以正常工作并自动更新。但是，当在第二部分“total / price = quantity”时出现了问题。

当在 Total 输入中输入的数字太大时（例如：9,876.23），数量不会自动计算并返回 0。但如果数字是例如 893.23，数量会正常工作。

有人能帮帮我吗？（对不起我的英语不好）

附言：我需要数量字段的值不超过小数点后 8 位（例如：0.00000000）。但在所有尝试中，我的计算都不起作用。

【问题讨论】：

标签： javascript jquery html calculator

【解决方案1】：

调试此问题的最简单方法是在适当的位置设置断点并查看发生了什么。例如，在 Chrome 中，打开你的开发工具，找到结果面板，然后设置一个断点：

然后，在控制台中，开始计算部分表达式。在这里，我评估了total.val()。那么发生了什么？

要意识到的关键是total.val() 返回一个字符串！那么当你使用"9,873.76" 之类的东西作为数字时会发生什么？没错，JavaScript 不知道如何处理逗号和 punts，返回 NaN。

为什么当你有一个数以千计的数字时它会出现？因为较小的数字没有逗号。

因此，你得到的结果是零。

【讨论】：

【解决方案2】：

掩码自动生成的千位分隔符在计算中不被理解，所以你应该先从输入中删除它

var qty=isNaN(parseInt(total.val().replace(",", "")/ $("#price").val())) ? 0 :(total.val().replace(",", "")/ $("#price").val())

但是，如果出现超过一千个分隔符（1,000,000），则会出现问题，因此您可以全局删除所有千位分隔符：

var my_total = total.val().replace(/,/, "");

【讨论】：