【问题标题】：.onchange not consistently picking up changes to input.onchange 没有始终如一地接受对输入的更改
【发布时间】：2015-09-22 10:17:14
【问题描述】：

当我更改输入 type="number" id="homevalue" 时，它不会触发更改，直到我更改另一个输入。所有其他输入都会立即触发更改，我看不出有任何差异可以解释这一点：

<body style="font-family: arial;">

  <form name="repaymentcalc" action="">
    <div align="center">
      </br>

      <p>
        Home Value £
        <input type="number" id="homevalue" value="250000" style="width: 75px">
      </p>

      <p>
        Loan Amount £
        <input type="number" id="loanamount" value="200000" style="width: 75px">
      </p>

      <p>
        Interest Rate
        <input type="number" id="interestrate" value="3.00" style="width: 50px">%
      </p>

      Term
      <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 100px">
      <div id="years" style="display:inline-block;">25 years

      </div>

      <div id="repayments">Monthly Repayment: £948.42</div>
      <p>
        <div id="ltv">Loan to Value: 80.0%</div>

    </div>
  </form>

  <script>
    window.onload = function() {
      document.repaymentcalc.loanamount.onchange = repayment;
      document.repaymentcalc.interestrate.onchange = repayment;
      document.repaymentcalc.numberpayments.onchange = repayment;

    }

    function repayment() {

      var x = parseInt(document.repaymentcalc.loanamount.value, 10);
      var y = parseInt(document.repaymentcalc.interestrate.value * 100, 10) / 120000;
      var z = parseInt(document.repaymentcalc.numberpayments.value, 10) * 12;
      var h = parseInt(document.repaymentcalc.homevalue.value, 10);

      var repayment = y * x * Math.pow((1 + y), z) / (Math.pow((1 + y), z) - 1);

      var loantovalue = x / h * 100;

      var year = z / 12;

      document.getElementById("repayments").innerHTML = 'Monthly Repayment: £' + repayment.toFixed(2);
      document.getElementById("ltv").innerHTML = 'Loan to Value: ' + loantovalue.toFixed(1) + '%';
      document.getElementById("years").innerHTML = year + ' years';

    }
  </script>

任何帮助将不胜感激:)

谢谢。

【问题讨论】：

尝试使用jQuery blur事件
你可以试试onkeyup。你也没有使用 jquery，所以不需要那个标签（除非你想使用它）
尝试在onkeyup 事件上为该元素设置事件处理程序。
您还没有为 homevalue 设置 onchange 事件。你可以看一个 wokring 演示 here

标签： javascript html input onchange

【解决方案1】：

它永远不会执行的原因是因为你失踪了。

document.repaymentcalc.homevalue.onchange = repayment;

Code Preview

【讨论】：

【解决方案2】：

你试试这个，

window.onload = function() {
  document.repaymentcalc.homevalue.onchange = repayment;
  document.repaymentcalc.loanamount.onchange = repayment;
  document.repaymentcalc.interestrate.onchange = repayment;
  document.repaymentcalc.numberpayments.onchange = repayment;

}

【讨论】：

【解决方案3】：

试试这个：

onmouseup 事件如果通过鼠标点击改变值也是需要的。用户可以通过单击箭头按钮或通过键盘输入来更改值，在下面的示例中，这两种情况都被处理了。

 window.onload = function() {
   document.repaymentcalc.loanamount.onkeyup = repayment;
   document.repaymentcalc.interestrate.onkeyup = repayment;
   document.repaymentcalc.numberpayments.onkeyup = repayment;

   document.repaymentcalc.loanamount.onmouseup = repayment;
   document.repaymentcalc.interestrate.onmouseup = repayment;
   document.repaymentcalc.numberpayments.onmouseup = repayment;

 };

 function repayment() {
   console.log("Here");
   var x = parseInt(document.repaymentcalc.loanamount.value, 10);
   var y = parseInt(document.repaymentcalc.interestrate.value * 100, 10) / 120000;
   var z = parseInt(document.repaymentcalc.numberpayments.value, 10) * 12;
   var h = parseInt(document.repaymentcalc.homevalue.value, 10);

   var repayment = y * x * Math.pow((1 + y), z) / (Math.pow((1 + y), z) - 1);

   var loantovalue = x / h * 100;

   var year = z / 12;

   document.getElementById("repayments").innerHTML = 'Monthly Repayment: £' + repayment.toFixed(2);
   document.getElementById("ltv").innerHTML = 'Loan to Value: ' + loantovalue.toFixed(1) + '%';
   document.getElementById("years").innerHTML = year + ' years';

 }

<form name="repaymentcalc" action="">
  <div align="center">
    </br>

    <p>
      Home Value £
      <input type="number" id="homevalue" value="250000" style="width: 75px">
    </p>

    <p>
      Loan Amount £
      <input type="number" id="loanamount" value="200000" style="width: 75px">
    </p>

    <p>
      Interest Rate
      <input type="number" id="interestrate" value="3.00" style="width: 50px">%
    </p>

    Term
    <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 100px">
    <div id="years" style="display:inline-block;">25 years

    </div>

    <div id="repayments">Monthly Repayment: £948.42</div>
    <p>
      <div id="ltv">Loan to Value: 80.0%</div>

  </div>
</form>

【讨论】：

【解决方案4】：

Demo

它没有触发，因为您还没有为homevalue 定义onchange 事件。您可以像下面这样添加。

window.onload = function() {
      document.repaymentcalc.homevalue.onchange = repayment;
      document.repaymentcalc.loanamount.onchange = repayment;
      document.repaymentcalc.interestrate.onchange = repayment;
      document.repaymentcalc.numberpayments.onchange = repayment;

    }

另外，homevalue 有很大的价值，它实际上会改变但不会因为精度而影响。我在演示中更改了 homevalue，您可以尝试完整的演示。

【讨论】：

【解决方案5】：

也许希望使用oninput 来代替数字输入。 onchange 只会在数字类型中使用本地数字选择器时触发。

请参阅下面的 sn-p，其中我包含了这两种类型的事件处理程序；

(function(){
  var inp = document.querySelector('input'),
      logChange = function() {
        console.log('there was a change');
      },
      logInput = function() {
        console.log('there was input'); 
      };
  
  inp.onchange = logChange;
  inp.oninput  = logInput;
}());

<!DOCTYPE html>
<head></head>
<body>
  <input type="number">
</body>

我认为在这种情况下oninput 可能是您更好的解决方案。 oninput 将在每个输入时触发，而不是在输入失去焦点时触发，就像 onchange 那样。关于这个here有一个简短的说明。

希望有帮助！

【讨论】：