输入值实时变化，Natvie JS

Question

我有 2 个输入 class 名称 .ValueNextYear 他们必须始终具有相同的值。问题是，它实时没有相同的值。

当我编辑第一个 .ValueNextYear 输入的值是 150 时，第二个输入 ValueNextYear 必须具有相同的值但不是。如果我在第一个输入 ValueNextYear 中输入 15000，第二个包含 1500。

另外，为了计算 #EstimateAmountReceived 输入的值，我需要在 .ValueNextYear 中有一个实际值才能得到好的结果。

（查看 NextYear() 函数）

欢迎任何帮助。抱歉我的英语不好

var AmountNextYear = (value1, value2) => {
 if (value1 >= 1 && value1 < 20) {
  return value2 += 10;
 } else if (value1 >= 20 && value1 < 50) {
  return value2 += 20;
 } else if (value1 >= 50 && value1 < 80) {
  return value2 += 30;
 } else if (value1 >= 80 && value1 < 100) {
  return value2 += 40;
 } else if (value1 >= 100 && value1 < 150) {
  return value2 += 50;
 } else if (value1 >= 150 && value1 < 300) {
  return value2 += 60;
 } else {
  return value2;
 }
};
var RealPaid = (value) => {
 let RealPaidValue = value - value * 66 / 100;
 return parseFloat(RealPaidValue).toFixed(2);
};
var TaxDeduction = (value) => {
 let TaxDeductionValue = value * 66 / 100;
 return parseFloat(TaxDeductionValue).toFixed(2);
};
var DownPayment = (value) => {
 let DownPayment = value * 60 / 100;
 return parseFloat(DownPayment).toFixed(2);
};
var DownPaymentInCompToLastYear = (value1, value2) => {
 let DownPaymentInCompToLastYear = value1 * 66 / 100 - value2;
 return parseFloat(DownPaymentInCompToLastYear).toFixed(2);
};
var checkSiEstIdentique = (ValueNextYear) => {
 if (ValueNextYear != document.querySelectorAll(".ValueNextYear").value) {
  return ValueNextYear = document.querySelectorAll(".ValueNextYear").value;
 }
};
var main = () => {
 var valueDonation = document.getElementById("valeurDon").value.replace(",", ".");
 document.getElementById("Deduction").value = TaxDeduction(valueDonation).replace(".", ",");
 var PostValueDonation = Math.ceil(valueDonation / 5) * 5;
 for (var i = document.querySelectorAll(".ValueNextYear").length - 1; i >= 0; i--) {
  document.querySelectorAll(".ValueNextYear")[i].value = AmountNextYear(valueDonation, PostValueDonation);
 }
 var ValueNextYear = AmountNextYear(valueDonation, PostValueDonation);
 checkSiEstIdentique(document.querySelectorAll(".ValueNextYear")[0].value);
 document.getElementById("DownPayment").value = DownPayment(TaxDeduction(valueDonation)).replace(".", ",");
 var DownPay = DownPayment(TaxDeduction(valueDonation));
 document.getElementById("EstimateAmountReceived").value = DownPaymentInCompToLastYear(ValueNextYear, DownPay).replace(".", ",");
 document.getElementById("formGroupExampleInput").value = TaxDeduction(ValueNextYear).replace(".", ",");
 document.getElementById("RealPaidValue").value = RealPaid(ValueNextYear).replace(".", ",");
 document.querySelectorAll(".ValueNextYear")[0].addEventListener("keydown", function (event) {
  NextYear(DownPay);
 });
};
var NextYear = (DownPay) => {
 console.log("ValueNextYear", document.querySelectorAll(".ValueNextYear")[0].value);
 document.querySelectorAll(".ValueNextYear")[1].value = document.querySelectorAll(".ValueNextYear")[0].value;
 console.log("EstimateAmountReceived", document.getElementById("EstimateAmountReceived").value);
 // document.getElementById("EstimateAmountReceived").value = DownPaymentInCompToLastYear(document.querySelectorAll(".ValueNextYear")[0].value, DownPay )
};
document.addEventListener("DOMContentLoaded", function (event) {
 main()
});

<div style="width: 80%; margin: auto;">
  <form>
    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput">En 2017, vous avez donné :</label>
      <input type="text" class="" id="valeurDon" onkeyup="main()" value="100">
    </div>
    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput2">Votre déduction fiscale sur votre don 2017</label>
      <input type="text" id="Deduction" disabled>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput2">Pour un don 2018 de :</label>
      <input type="text" class="ValueNextYear">
    </div>
    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput">Vous recevrez un acompte des impôts en janvier 2019 de :</label>
      <input type="text" id="DownPayment" disabled>
    </div>

    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput2">Vous percevrez en juillet 2019 un solde de :</label>
      <input type="text" id="EstimateAmountReceived" disabled>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput">Montant du don que vous souhaitez effectuer en 2018</label>
      <input type="text" class="ValueNextYear" disabled>
    </div>

    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput2">Montant total de votre déduction fiscale 2018</label>
      <input type="text" id="formGroupExampleInput" disabled>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput">Coût réel de vos dons 2018</label>
      <input type="text" id="RealPaidValue" disabled>
    </div>

  </form>
</div>

Answer 1

<!DOCTYPE html>
<html>
<body>

<p>A function is triggered when the user is pressing a key in the input field.</p>

<input id="one" type="text" value="" onKeyUp="myFunction()">
<input id="two" type="text" value="" >

<script>
function myFunction() {
    document.getElementById("two").value = document.getElementById("one").value;
}
</script>

</body>
</html>

Answer 2

正如@enxaneta 所指出的，如果我将 keydown 事件更改为 input 事件，它就会起作用。

document.querySelectorAll(".ValueNextYear")[0].addEventListener('input', function(event){
    NextYear(DownPay)
} );

正如@KENZiE 所指出的，如果我将 keydown 事件替换为 keyup 事件，它也会起作用。

document.querySelectorAll(".ValueNextYear")[0].addEventListener('keyup', function(event){
    NextYear(DownPay)
} );

Answer 3

将 keydown 更改为 keyup 在主函数中，更改：

document.querySelectorAll(".ValueNextYear")[0].addEventListener("keydown", function (event) {
    NextYear(DownPay);
});

收件人：

    document.querySelectorAll(".ValueNextYear")[0].addEventListener("keyup", function (event) {
    NextYear(DownPay);
});

在此处查看您的代码： https://codepen.io/KenzDozz/pen/pOYdRx

输入值实时变化，Natvie JS

input value change in real time, Natvie JS

html

javascript

input

real-time