.onchange 没有始终如一地获取输入的更改

Question

当我更改输入 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>

任何帮助将不胜感激:)

谢谢。

Answer 1

它从未执行的原因是因为你不见了。

document.repaymentcalc.homevalue.onchange = repayment;

Code Preview

Answer 2

你试试这个，

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

}

Answer 3

也许可以使用 oninput 代替数字输入。 onchange 仅当在数字类型中使用本机数字选择器时才会触发。

请参阅以下代码段，其中我包含了两种类型的事件处理程序；

(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.

有一个简短的说明

希望对您有所帮助！

Answer 4

试试这个：

onmouseup event is also needed if values are being changed by mouse clicks. User can change the value either by clicking on arrow buttons or by putting keyboard input, in below example both the cases are handled.

 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>

Answer 5

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，你可以尝试完全工作的演示。

.onchange 没有始终如一地获取输入的更改

.onchange not consistently picking up changes to input

html

javascript

input

onchange

Demo