Question

我有一个公式：

容量=因子*高度

我必须在表格上显示三个输入（容量，因子和高度），要求是如果用户输入任意两个输入，则必须计算第三个输入。

例如，如果用户输入容量和高度，则必须通过

计算系数

factor = capacity / height

等等。 任何人都可以建议如何通过使用任何输入的onChange来实现它？或者有更好的方法吗？

HTML

 <input id="Factor" min="0" onchange="calculate();" type="number">
 <input id="Capacity" min="0" onchange="calculate();" type="number">
 <input id="Height" min="0" onchange="calculate();" type="number">

JS

function calculate() {
            var capacity = $("#Capacity ").val();
            var height = $("#Height").val();
            var factor = $("#Factor").val();
            if (!capacity || !height || !factor) {
                return false;
            }
            if (height > 0 || factor > 0) {
                $("#Capacity").val(factor * height);
            }
            if (capacity > 0 || factor > 0) {
                $("#Height").val(capacity / factor);
            }
            if (capacity > 0 || height > 0) {
                $("#Factor").val(capacity / height);
            }
        };

Answer 1

我认为问题仍然不明确。您还需要指定如何处理所有3个输入都非空并且用户更改其中一个输入的情况。例如：capacity = 10，factor = 5，height = 2，用户将容量更改为101（即只添加1到结尾）。预期的行为是什么？有几个选择。

什么都不做（即等到用户清除其中一个字段）并且可能添加明确的“清除”按钮
指定重新计算优先级（例如，重新计算容量，除非它是重点字段，在这种情况下重新计算因子）。
不太明显且更复杂：跟踪用户关注字段的顺序并更新最近最近关注的字段（或根本不关注的字段）。我想你可能会想出更多的想法。

您可以在JS Fiddle

解决方案的代码主要由@ mark.hch

//to hold the order in which inputs were populated
var inputOrder = ['Factor', 'Capacity', 'Height'];
//calculation formulae
function UpdateFactor(c, h) { $('#Factor').val(c / h); }
function UpdateCapacity(f, h) { $('#Capacity').val(f * h); }
function UpdateHeight(f, c) {   $('#Height').val(c / f); }
//tied to keyup, could easily be change too
$('#Factor,#Capacity,#Height').keyup(function() {
    //gather our input numbers as floats
    var f = parseFloat($('#Factor').val());
  var c = parseFloat($('#Capacity').val());
  var h = parseFloat($('#Height').val());
  //get the current element's id
  var id = $(this).attr('id');
  //get the index in inputOrder if already present
  var idx = inputOrder.indexOf(id);
  //if the input already had a value, splice it from the inputOrder array
  if(idx != -1) { inputOrder.splice(idx, 1); }
  //add the current input id to the inputOrder array
  inputOrder.push(id);
  //count how many fields are currently filled out
  var ct = 0;
  ct += isNaN(f) ? 0 : 1;
  ct += isNaN(c) ? 0 : 1;
  ct += isNaN(h) ? 0 : 1;
  if(ct >= 2) {
    //update the least recently populated field
    switch(inputOrder[0]) {
        case 'Factor':
        UpdateFactor(c, h);
        break;
      case 'Capacity':
        UpdateCapacity(f, h);
        break;
      case 'Height':
        UpdateHeight(f, c);
        break;
    }
  }
});

在JS onChange中取任意2个输入并在第三个输入中显示结果

1 个答案: