Here we use the eval() function as the backbone of a simple calculator. One table is used for the display. A second table holds the buttons for the keypad. The whole thing forms an attractive looking calculator. To test it, simply paste the code into an editor like notepad and save it as Calculator.htm then run it in your browser.
A four function calculator (HTML)
<!-- experiments with table & button-input vegaseat 2/13/02 -->
<!-- table, border, cellpadding, cellspacing, input, onClick -->
<!-- uses eval() to do the final calculation -->
<!-- note: eval() traps divide by zero error -->
<html>
<head>
<title>A Simple Four-Banger</title>
</head>
<body>
<form name="calculator">
<!-- form the display to match the keypad -->
<table border="4" cellpadding="1" bordercolor="#FFFFFF" bgcolor="#73B27B" cellspacing="2" width="222">
<tr>
<td>
<input type="text" size="25" length="25" value="" name="ans" style="background:beige;color:black;">
</td>
</tr>
</table>
<!-- form the keypad with buttons in a table -->
<table border="4" cellpadding="2" bordercolor="#FFFFFF" cellspacing="2" width="150" bgcolor="#73B27B">
<tr>
<td align="center">
<input type="button" value=" 7 " name="seven" onClick="document.calculator.ans.value+='7'">
</td>
<td align="center">
<input type="button" value=" 8 " name="eight" onClick="document.calculator.ans.value+='8'">
</td>
<td align="center">
<input type="button" value=" 9 " name="nine" onClick="document.calculator.ans.value+='9'">
</td>
<td align="center">
<input type="button" value=" / " name="divide" onClick="document.calculator.ans.value+='/'">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value=" 4 " name="four" onClick="document.calculator.ans.value+='4'">
</td>
<td align="center">
<input type="button" value=" 5 " name="five" onClick="document.calculator.ans.value+='5'">
</td>
<td align="center">
<input type="button" value=" 6 " name="six" onClick="document.calculator.ans.value+='6'">
</td>
<td align="center">
<input type="button" value=" * " name="multiply" onClick="document.calculator.ans.value+='*'">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value=" 1 " name="one" onClick="document.calculator.ans.value+='1'">
</td>
<td align="center">
<input type="button" value=" 2 " name="two" onClick="document.calculator.ans.value+='2'">
</td>
<td align="center">
<input type="button" value=" 3 " name="three" onClick="document.calculator.ans.value+='3'">
</td>
<td align="center">
<input type="button" value=" - " name="subtract" onClick="document.calculator.ans.value+='-'">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value=" C " name="clear" onClick="document.calculator.ans.value=''">
</td>
<td align="center">
<input type="button" value=" 0 " name="zero" onClick="document.calculator.ans.value+='0'">
</td>
<td align="center">
<input type="button" value=" = " name="equal"
onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
</td>
<td align="center">
<input type="button" value=" + " name="add" onClick="document.calculator.ans.value+='+'">
</td>
</tr>
</table>
</form>
</body>
</html>
Blade10878 0 Junior Poster in Training
bhadz 0 Unverified User
bhadz 0 Unverified User
debasispradhan 0 Newbie Poster
mybaby567 0 Newbie Poster
mybaby567 0 Newbie Poster
learnin 0 Newbie Poster
almostbob 866 Retired: passive income ROCKS
campuzcrazyness -4 Newbie Poster
umapathi7s 0 Newbie Poster
BuraRAhul 0 Newbie Poster
ablitz -5 Light Poster
almostbob 866 Retired: passive income ROCKS
unwind 0 Newbie Poster
printrobin -3 Light Poster
almostbob 866 Retired: passive income ROCKS
Coldston87 0 Newbie Poster
appleluv 0 Newbie Poster
Arkinder 93 Posting Pro in Training
sid the kid 0 Newbie Poster
sheilaaellis44 0 Newbie Poster
jkpjtm 0 Newbie Poster
MidiMagic 579 Nearly a Senior Poster
komalsamad 0 Newbie Poster
mikerock 0 Newbie Poster
Ilian 0 Newbie Poster
selle18 0 Newbie Poster
slavica.k 0 Light Poster
diafol
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.