如何通过单击另一个输入来为输入添加值
[英]How to add value to input by clicking on another input
问题描述
I have a problem with my project.
我的项目有问题。 What I am trying to do is basically an ATM.我想做的基本上是一台自动取款机。 But I have a problem with adding a value to an input, by clicking on another input/button like in a real ATM.但是我在向输入添加值时遇到问题，方法是单击另一个输入/按钮，就像在真正的 ATM 中一样。 Can someone explain how it should be done?有人可以解释应该怎么做吗？
Here is my code:这是我的代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ATM</title>
</head>
<body>
Please enter your pin:
<form action="/script2.js" method="get">
<input type="password" name="pin" pattern="[0-9]{4}" maxlength="4" id="pin" value="">
<input type="button" value="1" onclick="add(this.value)">
<input type="submit" value="Validate">
</form>
<script src="script.js"></script>
</body>
</html> ```
and JS:
const pinPassword = document.getElementById('pin').value;
function add(x){
pinPassword.value = x;
}
4 个解决方案
解决方案1
0 2021-11-25 02:45:51
What you can do is simply list this function and apply it on all your number buttons你可以做的只是列出这个 function 并将它应用到你所有的数字按钮上
<form action="/script2.js" method="get">
<input type="password" name="pin" pattern="[0-9]{4}" maxlength="4" id="pin" value="">
<input class="input-button" type="button" value="1"/>
<input class="input-button" type="button" value="2"/>
<input class="input-button" type="button" value="3"/>
<input class="input-button" type="button" value="4"/>
<input class="input-button" type="button" value="5"/>
<input class="input-button" type="button" value="6"/>
<input class="input-button" type="button" value="7"/>
<input class="input-button" type="button" value="8"/>
<input class="input-button" type="button" value="9"/>
<input class="input-button" type="button" value="0"/>
<input type="submit" value="Validate">
</form>
const pinInputEl = document.getElementById('pin')
const buttonEls = document.querySelectorAll('.input-button')
const touchToAdd = (buttonEl) => {
buttonEl.addEventListener('click',()=> {
pinPassword.value += e.target.value
})
}
buttonEls.forEach(buttonEl => touchToAdd(buttonEl))
解决方案2
0 已采纳 2021-11-25 02:48:03
let pin = document.getElementById('pin'); function add(x) { if (pin.value.length <= 3) { pin.value += x; } } <html lang="en"> <head> <meta charset="UTF-8"> <title>ATM</title> </head> <body> Please enter your pin: <input type="password" name="pin" pattern="[0-9]{4}" maxlength="4" id="pin" value=""> <input type="button" value="1" id="one" onclick="add(this.value)"> </body> </html>
i come up with this, I'm just a beginner so i don't know if this is the best solution我想出了这个，我只是一个初学者，所以我不知道这是否是最好的解决方案
解决方案3
0 2021-11-25 02:52:56
you can use addEventListenr on you element and get the value from event您可以在您的element上使用 addEventListenr 并从event获取值
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ATM</title>
</head>
<body>
Please enter your pin:
<form action="/script2.js" method="get">
<input type="password" name="pin" pattern="[0-9]{4}" maxlength="4" id="pin" value="">
<input type="button" value="1">
<input type="submit" value="Validate">
</form>
<script src="script.js"></script>
</body>
</html>
const inputOne = document.getElementById("one");
const pinPassword = document.getElementById("pin");
inputOne.addEventListener("click", (e) => {
pinPassword.value = e.target.value;
});
</script>
解决方案4
0 2021-11-25 03:12:03
You need to get value from button and add in textbox.您需要从按钮中获取价值并添加到文本框中。 You give limit to the textbox but insert data in textbox through button it not work for that you wanna go through javascript .您对文本框进行了限制，但通过按钮在文本框中插入数据对于您想要 go 到javascript 。
var numArray = []; var textValue = ''; var err = document.getElementById('errMessage'); function add(value) { var txt = document.getElementById('pin'); numArray.push(value); if(numArray.length < 5) { textValue += value; txt.value = textValue; } else { err.innerHTML = "Limit is 4"; } }
<input type="button" value="1" onclick="add(this.value)"> <input type="button" value="2" onclick="add(this.value)"> <input type="button" value="3" onclick="add(this.value)"> <input type="button" value="4" onclick="add(this.value)"> <input type="button" value="5" onclick="add(this.value)"> <input type="button" value="6" onclick="add(this.value)"> <input type="button" value="7" onclick="add(this.value)"> <input type="button" value="8" onclick="add(this.value)"> <input type="button" value="9" onclick="add(this.value)"> <input type="button" value="0" onclick="add(this.value)"> <input type="password" pattern="[0-9]{4}" maxlength="4" size="4" id="pin" value=""> <span id="errMessage"></span>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.