如何获得 2 个输入的值，计算它们并将结果放入另一个

Question

我需要重构此代码以提高性能，我取两个输入的值，我需要计算它们并将其显示在另一个

            var price;
            var percentage;
            var value;

            function total() {
                value = ((price* (percentage/ 100)) + parseFloat(price));

                $("#Total").val(value.toFixed(2));
            }

            $("#price").keyup(function () {
                price= $(this).val();
                total()
            });
            $("#percentage").keyup(function () {
                percentage= $(this).val();
                total()
             
            });
         

Answer 1

你不应该使用这样的全局变量，它们可能会导致竞争条件。

// this self executing function will prevent the *Field variables to be bound to your browsers' window variable. 
(function() {   

  let priceField = $("#price");
  let percentageField = $("#percentage");
  let totalField = $("#Total");

  function total() {
    let price = priceField.val();
    let percentage = percentageField.val();
    
    let value = (price * (percentage/ 100)) + parseFloat(price);

    totalField.val(value.toFixed(2));
  }

  priceField.keyup(function () {
    total()
  });
  percentageField.keyup(function () {
    total()
  });

})()

我不得不说，这是您问题的解决方案，但它不是最好的解决方案。 但根据我的猜测，这个解决方案需要简单。

一些额外的提示是有选择地搜索像$("input#price")这样的输入字段，以防止任何其他潜在的冲突，尽管 id 应该是唯一的。

我还建议在代码中添加一些保护。 如果有人输入了一些非数值，会发生什么。 是否应该在进行计算之前从输入中删除它们，或者它们是否应该向用户触发错误，指出用户的输入无效。