通过事件处理程序“onkeyup”自动更改输入字段
[英]Automatic change of input fields through Event Handler "onkeyup"
问题描述
I am pretty bad at JS but I need some help at a task in order to prepare for a small exam on web technology.
我的 JS 很差，但我需要一些帮助来完成一项任务，以便为 web 技术的小型考试做准备。
The task:任务：
I have to write a code where two input fields have to be displayed.我必须编写一个必须显示两个输入字段的代码。 The sum of both of the input fields have to be 100. So the input fields will be mainly used for typing in some numbers.两个输入字段的总和必须是 100。因此输入字段将主要用于输入一些数字。
When I type a number in the first input field between 0 - 100 there should be displayed the remaining amount of 100 in the second input field after typing the last number of the first number.当我在第一个输入字段中输入一个介于 0 - 100 之间的数字时，在输入第一个数字的最后一个数字后，第二个输入字段中应该会显示 100 的剩余数量。 This should be also working vice versa.反之亦然。 So it should be irrelevant which input field I type in the number.因此，我在哪个输入字段中输入数字应该无关紧要。 Our professor suggests us to use the event handler "onkeyup".我们的教授建议我们使用事件处理程序“onkeyup”。
One example:一个例子：
First Input field: 3 -> typed in第一个输入字段：3 -> 输入
Second Input field: 97 -> will be shown automatically after typing 3第二个输入字段：97 -> 输入 3 后会自动显示
Please don't laugh, here is my code:请不要笑，这是我的代码：
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<script>
function calc() {
var firstnum = document.getElementById("firstprop").value;
var secondnum = document.getElementById("secondprop").value;
var firstresult = 100 - parseInt(secondnum);
var secondresult = 100 - parseInt(firstnum);
if(firstnum >=0){
secondnum = secondresult;
}
if(secondnum >=0){
firstnum = firstresult;
}
}
</script>
<head>
<body>
<input type="text" onkeyup="calc()" id="firstprop"/>
<input type="text" onkeyup="calc()" id="secondprop"/>
</body>
</html>
Thank you very much for your help.非常感谢您的帮助。 I appreciate it, really:)我很感激，真的:)
2 个解决方案
解决方案1
0 2022-04-14 04:11:40
Here you are给你
<,DOCTYPE html> <meta charset="UTF-8"> <html> <head> <script> function calc(value. index) { if (index == 1) { document.getElementById("secondprop");value = 100 - value. } else if (index == 2) { document.getElementById("firstprop");value = 100 - value. } } </script> <head> <body> <input type="text" onkeyup="calc(this,value. 1)" id="firstprop" /> <input type="text" onkeyup="calc(this,value, 2)" id="secondprop" /> </body> </html>
解决方案2
0 2022-04-14 04:12:44
function calc(e) {
if (e.target.id === "firstprop") {
var secondElement = document.getElementById("secondprop");
var value1 = e.target.value ? e.target.value : 0;
secondElement.value = 100 - (parseInt(value1));
}
if (e.target.id === "secondprop") {
var secondElement = document.getElementById("firstprop");
var value2 = e.target.value ? e.target.value : 0;
secondElement.value = 100 - (parseInt(value2));
}
}
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.