Question

我的抵押贷款计算器包含一个预付款字段，用于输入值或百分比。

如果用户输入一个值，则将计算并显示百分比。如果用户输入百分比，则将计算并显示该值。

我遇到的问题是，一旦输入，就只能修改值，而不能修改百分比。

相关代码是

    var Vdown = document.calc.downPayment.value;
    if (Vdown == 0 || Vdown == "") {
        Vdown = 0;
    } else {
        var result = (Vdown / VappraisedValue) * 100;
        document.calc.downPaymentPercent.value = result;
        document.calc.downPayment.value = Vdown;
    }

    var VdownPercent = document.calc.downPaymentPercent.value;
    if (VdownPercent == 0 || VdownPercent == "") {
        VdownPercent = 0;
    } else {
        var percent = (VdownPercent / 100) * VappraisedValue;
        document.calc.downPayment.value = percent.toFixed(0);
        document.calc.downPaymentPercent.value = VdownPercent;
    }

请参阅我的jsfiddle

function fn(num, places, comma) {

  var isNeg = 0;

  if (num < 0) {
    num = num * -1;
    isNeg = 1;
  }

  var myDecFact = 1;
  var myPlaces = 0;
  var myZeros = "";
  while (myPlaces < places) {
    myDecFact = myDecFact * 10;
    myPlaces = Number(myPlaces) + Number(1);
    myZeros = myZeros + "0";
  }

  onum = Math.round(num * myDecFact) / myDecFact;

  integer = Math.floor(onum);

  if (Math.ceil(onum) == integer) {
    decimal = myZeros;
  } else {
    decimal = Math.round((onum - integer) * myDecFact)
  }
  decimal = decimal.toString();
  if (decimal.length < places) {
    fillZeroes = places - decimal.length;
    for (z = 0; z < fillZeroes; z++) {
      decimal = "0" + decimal;
    }
  }

  if (places > 0) {
    decimal = "." + decimal;
  }

  if (comma == 1) {
    integer = integer.toString();
    var tmpnum = "";
    var tmpinteger = "";
    var y = 0;

    for (x = integer.length; x > 0; x--) {
      tmpnum = tmpnum + integer.charAt(x - 1);
      y = y + 1;
      if (y == 3 & x > 1) {
        tmpnum = tmpnum + ",";
        y = 0;
      }
    }

    for (x = tmpnum.length; x > 0; x--) {
      tmpinteger = tmpinteger + tmpnum.charAt(x - 1);
    }


    finNum = tmpinteger + "" + decimal;
  } else {
    finNum = integer + "" + decimal;
  }

  if (isNeg == 1) {
    finNum = "-" + finNum;
  }

  return finNum;
}

function sn(num) {

  num = num.toString();

  var len = num.length;
  var rnum = "";
  var test = "";
  var j = 0;

  var b = num.substring(0, 1);
  if (b == "-") {
    rnum = "-";
  }

  for (i = 0; i <= len; i++) {

    b = num.substring(i, i + 1);

    if (b == "0" || b == "1" || b == "2" || b == "3" || b == "4" || b == "5" || b == "6" || b == "7" || b == "8" || b == "9" || b == ".") {
      rnum = rnum + "" + b;

    }

  }

  if (rnum == "" || rnum == "-") {
    rnum = 0;
  }

  rnum = Number(rnum);

  return rnum;

}

function computeForm(form) {
  var VappraisedValue = document.calc.appraisedValue.value;

  var Vdown = document.calc.downPayment.value;
  if (Vdown == 0 || Vdown == "") {
    Vdown = 0;
  } else {
    var result = (Vdown / VappraisedValue) * 100;
    document.calc.downPaymentPercent.value = result;
    document.calc.downPayment.value = Vdown;
  }

  var VdownPercent = document.calc.downPaymentPercent.value;
  if (VdownPercent == 0 || VdownPercent == "") {
    VdownPercent = 0;
  } else {
    var percent = (VdownPercent / 100) * VappraisedValue;
    document.calc.downPayment.value = percent.toFixed(0);
    document.calc.downPaymentPercent.value = VdownPercent;
  }


}

<form name="calc" method="post" action="#">

  <table border='1' cellpadding='4' cellspacing='0'>
    <tbody>

      <tr>
        <td nowrap>
          Home value:
        </td>
        <td align="center">
          <span class="input-group-addon">$</span>
          <input id="appraised-value" type="number" min="0" max="10000000" step="25000" class="form-control" name="appraisedValue" onKeyUp="computeForm(this.form)" value="0" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">
        </td>
      </tr>

      <tr>
        <td nowrap>
          Down payment:
        </td>
        <td align="center">
          <span class="input-group-addon">$</span>
          <input id="down-payment" type="number" min="0" max="10000000" step="5000" class="form-control" name="downPayment" onKeyUp="computeForm(this.form)" value="0" onfocus="if(this.value==this.defaultValue)this.value=''">
          <input id="down-payment-percent" type="number" min="0" max="100" step="1" class="form-control" name="downPaymentPercent" onKeyUp="computeForm(this.form)" value="0" onfocus="if(this.value==this.defaultValue)this.value=''">
          <span class="input-group-addon">%</span>
        </td>
      </tr>


    </tbody>
  </table>
</form>

Answer 1

问题在于您如何更新“付款/百分比”值-每次更新任一值时，computeForm中的代码都会使用付款中的值来更新百分比，然后只有 Percent （刚更新）的值用于设置付款。因此，付款中的任何内容都将始终获胜。

有两种选择可以使其按您希望的方式工作：

您可以在Payment and Percent的“ onKeyUp”事件中传递一个变量，该变量告诉ComputeForm使用if(which === "pmt") { [code_to_update_payment] } else { [code_to_update_pct] } 类型的构造来更新另一个。
您可以将更新代码分解为两个独立的函数function updatePmt() { } function updatePct() { }，然后从HTML中相应的“ onKeyUp”方法中调用每个函数。

任何一种都应该可以很好地解决您遇到的问题。

按价值或百分比计算

1 个答案: