时间戳

首页 > 解决方案 > 如何找到空字段并计算缺失字段的值

javascript - 如何找到空字段并计算缺失字段的值

问题描述

我有一个 javascript 应用程序，我需要一个用于抵押贷款的计算器，所需的 UI 看起来像

在此处输入图像描述

唯一的问题是我不能有计算按钮，所以我必须验证空字段并进行计算，初始计算成功但如果用户想要删除单个字段，则删除字段的值会自动填充，我想防止，有没有办法做到这一点？

当前代码

如果条件

function checkForValues(){

if(this.state.loanAmount != 0 && this.state.noOfYears != 0 && this.state.interestRate != 0){
      this.state.payment = this.state.loanAmount * ( (this.state.interestRate/12 * pow(1 + this.state.interestRate/12 , this.state.noOfYears) ) / ( pow(1 + this.state.interestRate/12 , this.state.noOfYears) - 1 ) )
}else if(this.state.payment != 0 && this.state.noOfYears != 0 && this.state.interestRate != 0){
      this.state.loanAmount = this.state.payment / ( (this.state.interestRate/12 * pow(1 + this.state.interestRate/12 , this.state.noOfYears) ) / ( pow(1 + this.state.interestRate/12 , this.state.noOfYears) - 1 ) )
}

}

在更改处理程序上

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
    this.checkForValues();
  };

<Label for='loanAmount'>Loan Amount</Label>
                <Input
                  type='text'
                  name='loanAmount'
                  id='loanAmount'
                  className='mb-3'
                  placeholder='Loan Amount'
                  onChange={this.onChange}
                />

标签： javascriptreactjs

解决方案

您可以查看最后一次更改源自的字段，并确定从那里更新哪个字段，例如（从 react 抽象的代码，因此它在此处运行）

let pow = Math.pow;
let lastUpdatedByScript = null;

// Calc monthly payment based on formula at https://en.wikipedia.org/wiki/Mortgage_calculator
function checkForValues(e){

  // Get elements of interest
  let form = this.form;
  let amountField = form.amount;
  let paymentField = form.payment;
  
  // Get values of interest
  let amount  = +amountField.value;
  let years   = +form.years.value;
  let nPmnts  = years * 12;
  let rate    = +form.rate.value / 100;
  let mRate   = rate / 12;
  let payment = +paymentField.value;

  // Work out field to update, if any
                      // If amount field changed, update payment
  let fieldToChange = this == amountField? paymentField :
                      // If payment field changed, update amount
                      this == paymentField? amountField :
                      // If years or rate changed, update whichever of amount or payment
                      // was last changed by script (if either)
                      this == form.years || this == form.rate? lastUpdatedByScript : null;

  // Only do something if have years and rate
  if (years && rate) {

    // Common factor, calc once
    let f = mRate /  (1 - (pow(1 + mRate, -nPmnts)));

    // If changing payment field, calculate payment
    if (fieldToChange == paymentField) {
      paymentField.value = (amount * f).toFixed(2);
      lastUpdatedByScript = paymentField;
  
   // If change came from payment field, calculate amount
   } else if (fieldToChange == amountField) {
      amountField.value = (payment / f).toFixed(2);
      lastUpdatedByScript = amountField;
    }
  }
}

document.querySelectorAll('input[type="number"]').forEach(inp => inp.addEventListener('change', checkForValues, false));
<form id="Calculator" onsubmit="return false;">
  <table>
    <tr><td>Term (years)<td>Rate (% pa)<td>Amount ($)<td>Monthly Payment ($)
    <tr>
      <td><input name="years" type="number" value="30">
      <td><input name="rate" type="number" value="3.09">
      <td><input name="amount" type="number">
      <td><input name="payment" type="number">
    <tr>
      <td colspan="4"><input type="reset" value="Reset form">
  </table>
</form>

您可能还希望临时突出显示由脚本更改的字段以引起用户的注意，否则他们可能看不到发生了什么。:-)

推荐阅读