Fatal编程技术网
  • javascript/
  • Javascript .onchange未始终拾取对输入的更改

Javascript .onchange未始终拾取对输入的更改

javascript html input

Javascript .onchange未始终拾取对输入的更改,javascript,html,input,onchange,Javascript,Html,Input,Onchange,当我更改输入type=“number”id=“homevalue”时，它不会触发更改，直到我更改另一个输入。所有其他输入都会立即触发变化，我看不出有什么区别可以解释这一点： <body style="font-family: arial;"> <form name="repaymentcalc" action=""> <div align="center"> </br> <p> H

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





房屋价值



贷款金额：



利率
%


学期
25年
每月还款：948.42英镑

贷款价值比：80.0%
window.onload=函数（）{
document.returnmentcalc.loanamount.onchange=还款；
document.returnmentcalc.interestrate.onchange=还款；
document.returnmentcalc.numberpayments.onchange=还款；
}
功能偿还（）{
var x=parseInt（document.returnmentcalc.loanamount.value，10）；
var y=parseInt（document.returnmentcalc.interestrate.value*100,10）/120000；
var z=parseInt（document.returnmentcalc.numberpayments.value，10）*12；
var h=parseInt（document.returnmentcalc.homevalue.value，10）；
var还款=y*x*数学功率（（1+y），z）/（数学功率（（1+y），z）-1；
var loantovalue=x/h*100；
风险年=z/12；
document.getElementById（“还款”）.innerHTML=“每月还款：£”+还款。固定（2）；
document.getElementById（“ltv”）.innerHTML='Loan-to-Value:'+loantovalue.toFixed（1）+'%；
document.getElementById（“年”）.innerHTML=年+年；
}
任何帮助都将不胜感激：）

谢谢。

它从未执行的原因是因为你失踪了

document.repaymentcalc.homevalue.onchange = repayment;
你试试这个

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

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

请参阅下面的代码段，其中包括了两种类型的事件处理程序

（函数（）{
var inp=document.querySelector（'input'），
logChange=函数（）{
log（“发生了变化”）；
},
logInput=function（）{
log（“有输入”）；
};
inp.onchange=logChange；
inp.oninput=登录输入；
}());



试试这个：

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



window.onload=function（）{
document.returnmentcalc.loanamount.onkeyup=还款；
document.returnmentcalc.interestrate.onkeyup=还款；
document.returnmentcalc.numberpayments.onkeyup=还款；
document.returnmentcalc.loanamount.onmouseup=还款；
document.returnmentcalc.interestrate.onmouseup=还款；
document.returnmentcalc.numberpayments.onmouseup=还款；
};
功能偿还（）{
console.log（“此处”）；
var x=parseInt（document.returnmentcalc.loanamount.value，10）；
var y=parseInt（document.returnmentcalc.interestrate.value*100,10）/120000；
var z=parseInt（document.returnmentcalc.numberpayments.value，10）*12；
var h=parseInt（document.returnmentcalc.homevalue.value，10）；
var还款=y*x*数学功率（（1+y），z）/（数学功率（（1+y），z）-1；
var loantovalue=x/h*100；
风险年=z/12；
document.getElementById（“还款”）.innerHTML=“每月还款：£”+还款。固定（2）；
document.getElementById（“ltv”）.innerHTML='Loan-to-Value:'+loantovalue.toFixed（1）+'%；
document.getElementById（“年”）.innerHTML=年+年；
}






房屋价值



贷款金额：



利率
%


学期
25年
每月还款：948.42英镑

贷款价值比：80.0%


它不会触发，因为您尚未为
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，您可以尝试完全运行演示。
尝试使用
jQuery blur
event您可以尝试onkeyup。另外，您没有使用jquery，因此不需要该标记（除非您想使用它），请尝试在该元素的
onkeyup
事件上设置事件处理程序。您没有为homevalue设置onchange事件。您可以看到wokring演示