使用 Html/Java 创建小键盘的问题

Question

尝试制作一个小 numberpad，如附图所示，作为我 Javascript 练习的一部分。寻找 help/tips 可能会修复或让我朝着正确的方向前进，以获得具有工作重置功能的工作 Numpad。没有重置功能代码，我无法将数字输入到我的文本框中。但是附加代码失去了功能。

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

Answer 1

试试这个..

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>

使用 Html/Java 创建小键盘的问题

Issues with creating numpad with Html/Java

html

javascript

numpad