尝试制作一个小的数字键盘,如所附图片所示,作为我的 Javascript 练习的一部分。寻找可能修复或让我朝正确方向发展的帮助/提示,以获得具有工作重置功能的工作数字键盘。如果没有重置功能代码,我就可以在文本框中输入数字。但额外的代码失去了功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Q4</title>
</head>
<body>
<form action="" method="" name="Q4">
<table cellpadding="3" cellspacing="3" border="0">
<td colspan="3"><input id=Key type="text" value="" maxlength="10" name="Key" /></td>
<tr>
<td> <input type="button" value="1" id="1" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td> <input type="button" value="2" id="2" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td> <input type="button" value="3" id="3" " style="font-size:25px;" onClick=addNumber(this); /></td>
</tr>
<tr>
<td><input type="button" value="4" id="4" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="5" id="5" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="6" id="6" " style="font-size:25px;" onClick=addNumber(this); /></td>
</tr>
<tr>
<td><input type="button" value="7" id="7" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="8" id="8" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="9" id="9" " style="font-size:25px;" onClick=addNumber(this); /></td>
</tr>
<tr>
<td colspan="3"><input type="button" value="Reset" id="Reset" onClick=clearNumber(this); /> </td>
</tr>
</table>
<script>
function addNumber(element){
document.getElementById('Key').value = document.getElementById('Key').value+element.value;
}
function Reset {
document.getElementById("Key").reset();
}
</script>
</body>
</html>
最佳答案
试试这个..
function addNumber(element) {
document.getElementById('Key').value = document.getElementById('Key').value+element.value;
}
function clearNumber() {
document.getElementById("Key").value = "";
}
<table cellpadding="3" cellspacing="3" border="0">
<tr>
<td colspan="3">
<input id="Key" type="text" value="" maxlength="10" name="Key" />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" id="1" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="2" id="2" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="3" id="3" style="font-size:25px;" onclick="addNumber(this)" />
</td>
</tr>
<tr>
<td>
<input type="button" value="4" id="4" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="5" id="5" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="6" id="6" style="font-size:25px;" onclick="addNumber(this)" />
</td>
</tr>
<tr>
<td>
<input type="button" value="7" id="7" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="8" id="8" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="9" id="9" style="font-size:25px;" onclick="addNumber(this)" />
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Reset" id="Reset" onclick="clearNumber(this)" />
</td>
</tr>
</table>
关于javascript - 使用 Html/Java 创建小键盘的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59015099/