代码之家 › 专栏 › 技术社区 › crg ali

输入值实时变化,Natvie JS

real-time input html javascript

crg ali · 技术社区 · 6 年前

我有两个输入与类名 .ValueNextYear 一定有同样的价值。问题是,它在实时中没有相同的值。

.VALUENXTYEAR公司 第二个输入值nextyear必须具有相同的值,但不是。如果在第一个输入值nexty中输入15000,则第二个值包含1500。

#EstimateAmountReceived 输入我需要有一个真正的价值 .VALUENXTYEAR公司 因为我有一个好结果。

(看着 NextYear() (功能)

Link with code

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>

3 回复 | 直到 6 年前

KENZiE 6 年前

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

crg ali 3 年前

就像@enxaneta指出的如果我改变 keydown 事件依据 input 如果成功的话。

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

正如@KENZiE所指出的,如果我替换 键盘按下 事件依据 keyup 事件。

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

-2

Abhi Sharma 6 年前

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