javascript - 仅需要 3 个表单域中的 2 个

Question

我正在制作一个 yield 计算器。有3个字段。 yield 、购买价格和租金。

比如我想要10%的 yield ，我付了500k，那么我的计算器就会算出达到10% yield 的月租。另外，如果我想要 10% 的 yield ，我输入了 500 的月租，那么我的计算器就是购买价格。最后，如果我支付 500k，让租金为 500，那么我的计算器将得出 yield 。

<form>
   <input type="number" name="purchase_price">
   <input type="number" name="rent">
   <input type="number" name="yield">
   <input type="submit" value="Calculate">
</form>

此外:

如果填充了任何 2 个字段，我如何才能禁用第 3 个字段？

例子:

price & rent = yield 字段被禁用

price & yield = rent 字段被禁用

rent & yield = price 字段被禁用

Answer 1

在我的代码示例中，我针对所有不是提交按钮的输入。因此，如果您在其他地方有输入字段，这将停用它。我使用它是为了简单起见，你应该在你的表单中添加一个 id 或 class。

    var form = document.querySelector('form'); 

    form.addEventListener('change',function(event){
     elms = document.querySelectorAll('input:not([type="submit"]');
      var count = 0; 
        Array.prototype.forEach.call(elms,function(elm){
             if (elm.value != ''){
                 count++; 
              }
        });
       
       Array.prototype.forEach.call(elms,function(elm){
             if (count >= 2 && elm.value === ''){
                 elm.disabled = true; 
               }
             else{
               elm.disabled = false;
               }
        });
      
    });

  <form>
       <input type="number" name="purchase_price">
       <input type="number" name="rent">
       <input type="number" name="yield">
       <input type="submit" value="Calculate">
    </form>