JavaScript tutorial- Make buttons to function


Calculator: Make buttons to function

Now you have nine buttons labeled from 0 to 9 that you hope they will input the number characters in to the text box. However, you need to write some JavaScript code to make they work as expected. Each function will append one number character to text box when it is clicked.

To make each of button works we create one function for each button. These functions are get0(), get1(),get2(), get3(), get4(), get5(), get6(),get7(), get8(), and get9().Each function is attached to the onclick event of each button respectivly.

<html>
<head>
<title>A simple calculator</title>
<script type="text/javascript" language="JavaScript">
function get0(){
document.forms[0].txtvalue.value+="0";
}
function get1(){
document.forms[0].txtvalue.value+="1";
}
function get2(){
document.forms[0].txtvalue.value+="2";
}
function get3(){
document.forms[0].txtvalue.value+="3";
}
function get4(){
document.forms[0].txtvalue.value+="4";
}
function get5(){
document.forms[0].txtvalue.value+="5";
}
function get6(){
document.forms[0].txtvalue.value+="6";
}
function get7(){
document.forms[0].txtvalue.value+="7";
}
function get8(){
document.forms[0].txtvalue.value+="8";
}
function get9(){
document.forms[0].txtvalue.value+="9";
}


</script>
</head>
<body>
<html>
<head>
<title>A simple calculator</title>

</head>
<body>
<form >
<table style="border: 2; background-color: silver;">
<tr>
<td colspan="6">
<div id="display"></div>
<input type="text" name="txtvalue" maxlength="10" style="width: 164px" onkeypress="return check(event)"></td>
</tr>
<tr >

<td><input type="button" name="button0" value="0"></td>
<td><input type="button" name="button1" value="1"></td>
<td><input type="button" name="button2" value="2"></td>
<td><input type="button" name="button3" value="3"></td>
<td><input type="button" name="button4" value="4"></td>
<td><input type="button" name="buttonadd" value="+"></td>
<td><input type="button" name="buttonsubtract" value="-"></td>
<td><input type="button" name="buttonresult" value="="></td>


</tr>
<tr>

<td ><input type="button" name="button5" value="5"></td>
<td><input type="button" name="button6" value="6"></td>
<td><input type="button" name="button7" value="7"></td>
<td><input type="button" name="button8" value="8"></td>
<td><input type="button" name="button9" value="9"></td>
<td><input type="button" name="buttonmultiply" value="*"></td>
<td><input type="button" name="buttondivide" value="/"></td>
<td><input type="button" name="buttonclear" value="C"></td>


</tr>
</table>

</form>
</body>
</html>

<td><input type="button" name="button0" value="0" onclick="get0()"></td>
<td><input type="button" name="button1" value="1" onclick="get1()"></td>
<td><input type="button" name="button2" value="2" onclick="get2()"></td>
<td><input type="button" name="button3" value="3" onclick="get3()"></td>
<td><input type="button" name="button4" value="4" onclick="get4()"></td>
<td><input type="button" name="buttonadd" value="+"></td>
<td><input type="button" name="buttonsubtract" value="-"></td>
<td><input type="button" name="buttonresult" value="="></td>


</tr>
<tr>

<td ><input type="button" name="button5" value="5" onclick="get5()"></td>
<td><input type="button" name="button6" value="6" onclick="get6()"></td>
<td><input type="button" name="button7" value="7" onclick="get7()"></td>
<td><input type="button" name="button8" value="8" onclick="get8()"></td>
<td><input type="button" name="button9" value="9" onclick="get9()"></td>
<td><input type="button" name="buttonmultiply" value="*"></td>
<td><input type="button" name="buttondivide" value="/"></td>
<td><input type="button" name="buttonclear" value="C"></td>


</tr>
</table>

</form>
</body>
</html>




Comments




This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.