我的專案有問題。我想做的基本上是一臺自動取款機。但是我在向輸入添加值時遇到了問題，方法是單擊另一個輸入/按鈕，例如在真正的 ATM 中。有人可以解釋一下應該如何做嗎？
這是我的代碼：
<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;
}
uj5u.com熱心網友回復：
您需要從按鈕獲取值并添加到文本框中。
var textValue = '';
var err = document.getElementById('errMessage');
function add(value) {
var txt = document.getElementById('pin');
if(txt.value.length < 4)
{
textValue = value;
txt.value = textValue;
}
else
{
err.innerHTML = "Limit is 4";
}
}<input type="password" pattern="[0-9]{4}" maxlength="4" size="4" id="pin" value="" style="width: 200px">
<br>
<span id="errMessage"></span>
<br><br>
<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)">
<br><br>
<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)">
<br><br>
<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)">
<br><br>
<input style="margin-left: 30px" type="button" value="0" onclick="add(this.value)">uj5u.com熱心網友回復：
您可以做的只是列出此功能并將其應用于所有數字按鈕
<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))
uj5u.com熱心網友回復：
您可以對您使用 addEventListenrelement并從中獲取值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>
uj5u.com熱心網友回復：
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>我想出了這個，我只是一個初學者，所以我不知道這是否是最好的解決方案
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/365498.html
標籤：javascript html
上一篇：為什么一個拒絕顯示？