<table>
<tr>
<td colspan="4" class="main"><input type="text" id="result"/></td>
<td><input type="button" value="C" class="cancel" onclick="clr()"/> </td>
</tr>
<tr>
<td><input type="button" value="7" onclick="Display('7')"/> </td>
<td><input type="button" value="8" onclick="Display('8')"/> </td>
<td><input type="button" value="9" onclick="Display('9')"/> </td>
<td><input type="button" value="÷"onclick="Display('/')"/> </td>
</tr>
<tr>
<td><input type="button" value="4" onclick="Display('4')"/> </td>
<td><input type="button" value="5" onclick="Display('5')"/> </td>
<td><input type="button" value="6" onclick="Display('6')"/> </td>
<td><input type="button" value="*" onclick="Display('*')"/> </td>
</tr>
<tr>
<td><input type="button" value="1" onclick="Display('1')"/> </td>
<td><input type="button" value="2" onclick="Display('2')"/> </td>
<td><input type="button" value="3"onclick="Display('3')"/> </td>
<td><input type="button" value="-" onclick="Display('-')"/> </td>
</tr>
<tr>
<td><input type="button" value="0"onclick="Display('0')"/> </td>
<td><input type="button" value="."onclick="Display('.')"/> </td>
<td><input type="button" value="=" onclick="solve()"/> </td>
<td><input type="button" value="+"onclick="Display('+')"/> </td>
</tr>
</table>
<code lang="javascript">
function Display(value) {
document.getElementById("result").value += value;
}
function solve() {
var val1 = document.getElementById("result").value;
var val2 = eval(val1);
document.getElementById("result").value = val2;
}
function clr() {
document.getElementById("result").value = ""
}
function cancel() {
var value = document.getElementById("result").value;
document.getElementById("result").value = value.substr(0, value.length - 1);
}
</code>