Когда я вношу изменения в тип ввода = «номер» id = «homevalue», он не срабатывает, пока я не изменю другой вход. Все остальные входы огня изменения сразу же, и я не вижу никакой разницы, что бы объяснить это:.onchange неизменно подбирает изменения во вход

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

Любая помощь будет высоко ценится :)

Спасибо.

источник

2015-09-22 J. Ayo

Попробуйте использовать событие 'jQuery blur' – Akshay

, вы можете попробовать onkeyup. также вы не используете jquery, поэтому нет необходимости в этом теге (если вы не хотите его использовать) – Pete

Попробуйте установить обработчик события в событии 'onkeyup' для этого элемента. –

Причина, по которой она никогда не выполняется, была из-за того, что вам не хватает.

document.repaymentcalc.homevalue.onchange = repayment;

Code Preview

источник

2015-09-22 10:23:03

Вы попробуете это,

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

}

источник

2015-09-22 10:25:27

Может выглядеть использовать 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.

Надеюсь, что это поможет!

источник

2015-09-22 10:27:39 jh3y

Попробуйте это:

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>

источник

2015-09-22 10:29:41 Rayon

Demo

Это не вызывает, потому что вы не определили onchange событие для homevalue. Вы можете добавить, как показано ниже.

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 на демо, и вы можете попробовать полностью работать демо.

источник

2015-09-22 10:30:39

.onchange неизменно подбирает изменения во вход

ответ

Demo

Смежные вопросы