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

我有一个公式：

容量=系数*高度

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

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

系数=容量/高度

等等有人能建议如何通过使用输入的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">

---

我认为这个问题还没有明确说明。您还需要指定当所有3个输入均为非空且用户更改其中一个输入时如何处理。例如：

容量

=10，

系数

=5，

高度

=2，用户将容量更改为101（即仅在末尾添加1）。预期的行为是什么？有几个选择

不执行任何操作（即等待用户清除至少一个字段），并可能添加明确的“清除”按钮

指定重新计算优先级（例如，重新计算容量，除非它是重点字段，在这种情况下，重新计算系数）

不那么明显，也更复杂：跟踪关注用户的字段的顺序，并更新最近最不关注（或根本不关注）的字段。我想你可能会想出更多的主意

您可以在网站上看到选项3的演示

解决方案的代码主要由@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;
    }
  }
});

---

我认为这个问题还没有明确说明。您还需要指定当所有3个输入均为非空且用户更改其中一个输入时如何处理。例如：

容量

=10，

系数

=5，

高度

=2，用户将

容量

更改为

101

（即只在末尾添加

1

）。预期的行为是什么？有几种选择。1） 不执行任何操作（即等待用户清除至少一个字段），并可能添加明确的“清除”按钮2）指定重新计算优先级（例如，重新计算

容量

，除非它是重点字段，在这种情况下，重新计算

系数

）。3） 不那么明显，也更复杂：跟踪关注用户的字段的顺序，并更新最近最不关注（或根本不关注）的字段。我想你可能会想出更多的想法。下面是@SergGr.@mark.hch建议的第三个选项，感谢你添加了一些代码，但我认为策略3的优点是，你不需要将填充字段的2和3分开。您只需使用所有3个字段的ID预先初始化

inputOrder

。你可以在@SergGr good call上看到它！我们还可以再清理一点，因为我们不必检查阵列中是否存在它来拼接它。。谢谢。你的回答救了我一命

//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;
    }
  }
});