CODEWITHSUNDEEP
javascripthtmlinputonchange
J. Ayo
J. Ayo

Reputation: 560

.onchange not consistently picking up changes to input

When I make a change to the input type="number" id="homevalue" it does not fire a change until I change another input. All the other inputs fire a change right away, and I cannot see any difference that would explain this:

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

Any help would be much appreciated :)

Thanks.

Upvotes: 2

Views: 338

Answers (5)

Jhey
Jhey

Reputation: 1377

Maybe look to use oninput instead with a number input. onchange will only fire when using the native number selectors within a number type.

See the following snippet where I've included both types of event handler;

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

I think in this case oninput may be a better solution for you. oninput will fire upon each input and not when the input loses focus like it would with onchange. There is a short note about this here.

Hope that helps!

Upvotes: 0

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

Demo

It is not triggering because you have not defined onchange event for homevalue. You can add like below.

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

    }

Also, homevalue has big value, it actually changing but not affecting due to precision. I have changed homevalue on demo and you can try fully working demo.

Upvotes: 0

Rayon
Rayon

Reputation: 36599

Try this:

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>

Upvotes: 0

San Ka Ran
San Ka Ran

Reputation: 156

You try this,

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

}

Upvotes: 0

Darren Willows
Darren Willows

Reputation: 2131

The reason it never executes, was because you are missing.

document.repaymentcalc.homevalue.onchange = repayment;

Code Preview

Upvotes: 1

Related Questions