Question

我有2个输入，它们的类名称为.ValueNextYear，它们的值必须始终相同。问题在于，它没有实时的相同值。

当我编辑第一个具有值150的.ValueNextYear输入时，第二个输入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

如@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 2

将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

Answer 3

95 65 ed 62 93 69 c0 10 57 a0 b9 9c ba 4b 43 aa

Natvie JS实时更改输入值

3 个答案: