1

Trying to make a small numberpad as shown in the picture attached as apart of my Javascript practice. Loooking for help/tips that could possibly fix or pit me in the right direction in to getting a working Numpad that has a working reset function. Without the reset function code, im able to input numbers into my textbox. but the additional code lose functionality.

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

1 回答 1

0

尝试这个..

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>

于 2019-11-24T07:23:16.453 回答