Creating a JavaScript Calculator

<html
    xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Calculator</title>
        <script type="text/javascript" src="calculator.js"></script>
        <link rel="stylesheet" media="screen, print, handheld" type="text/css" href="calculator.css" />
    </head>
    <body>
        <table class="calculator" id="calc">
            <tr>
                <td colspan="4" class="calc_td_result">
                    <center>
                        <h3>Calculator</h3>
                    </center>

                    <textbox id="calc_result1" class="calc_result1"></textbox>
                    <input type="text" readonly="readonly" name="calc_result" id="calc_result" class="calc_result"
onkeydown="javascript:key_detect('calc',event);" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="CE" onclick="javascript:f_calc('calc','ce');" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #FF0000" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="←" onclick="javascript:f_calc('calc','nbs');" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #FF0000" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="%" onclick="javascript:f_calc('calc','%');" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #FF0000" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="+" onclick="javascript:f_calc('calc','+');" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #FF0000" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="7" onclick="javascript:add_calc('calc',7);" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #0000FF" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="8" onclick="javascript:add_calc('calc',8);" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #0000FF" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="9" onclick="javascript:add_calc('calc',9);" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #0000FF" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="-" onclick="javascript:f_calc('calc','-');" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #FF0000" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="4" onclick="javascript:add_calc('calc',4);" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #0000FF" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="5" onclick="javascript:add_calc('calc',5);" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #0000FF" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="6" onclick="javascript:add_calc('calc',6);" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #0000FF" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="x" onclick="javascript:f_calc('calc','*');" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #FF0000" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="1" onclick="javascript:add_calc('calc',1);" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #0000FF" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="2" onclick="javascript:add_calc('calc',2);" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #0000FF" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="3" onclick="javascript:add_calc('calc',3);" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #0000FF" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="/" onclick="javascript:f_calc('calc','/');" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #FF0000" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="0" onclick="javascript:add_calc('calc',0);" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #0000FF" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="±" onclick="javascript:f_calc('calc','+-');" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #0000FF" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="." onclick="javascript:add_calc('calc','.');" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #0000FF" />
                </td>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="=" onclick="javascript:f_calc('calc','=');" onmouseover="mOver(this)" onmouseout="mOut(this)"
style="color: #FF0000" />
                </td>
            </tr>
        </table>
        <script type="text/javascript">
document.getElementById('calc').onload = init_calc('calc');
</script>
    </body>
</html>

body {
  background-color: #DBDBFF;
}

.calculator {
  width: 300px;
  height: 300px;
  background-color: #FFFFE2;
  border: 2px solid #CCCCCC;
  margin-top: 150px;
  margin-left: 500px;
}

.calculator td {
  height: 16.66%;
}

.calc_td_result {
  text-align: center;
}

.calc_result {
  width: 96%;
  text-align: right;
  height: 37px;
  font-size: x-large;
  background-color: White;
}

.calc_td_calculs {
  text-align: center;
}

.calc_calculs {
  width: 90%;
  text-align: left;
}

.calc_td_btn {
  width: 25%;
  height: 100%;
}

.calc_btn {
  width: 90%;
  height: 90%;
  font-size: 20px;
}

td.calc_td_result h3 {
/*background-color:#521252;*/
  color: Blue;
  font-size: x-large;
}

.calc_result1 {
  text-align: right;
}

calc_array = new Array();
var calcul = 0;
var pas = 0;
var temp = 0;

function $id(id) {
    return document.getElementById(id);
}
function f_calc(id, n) {
    var out = $id(id + '_result').value;
    $id(id + '_result1').innerHTML += $id(id + '_result1').innerHTML = out + n;
    if (n == 'ce') {
        $id(id + '_result1').innerHTML = "";
        init_calc(id);
    } else if (n == '=') {
        $id(id + '_result1').innerHTML = "";
        if (calc_array[id][0] != '=' && calc_array[id][1] != 1) {
            eval('calcul=' + calc_array[id][2] + calc_array[id][0] + calc_array[id][3] + ';');
            calc_array[id][0] = '=';
            $id(id + '_result').value = calcul;

            calc_array[id][2] = calcul;
            calc_array[id][3] = 0;
        }
    } else if (n == '+-') {
        $id(id + '_result').value = $id(id + '_result').value * (-1);
        if (calc_array[id][0] == '=') {
            calc_array[id][2] = $id(id + '_result').value;
            calc_array[id][3] = 0;

        } else {
            calc_array[id][3] = $id(id + '_result').value;
        }
        pas = 1;
    } else if (n == 'nbs') {
        $id(id + '_result1').innerHTML = "";
        if ($id(id + '_result').value < 10 && $id(id + '_result').value > -10) {
            $id(id + '_result').value = 0;

        } else {
            $id(id + '_result').value = $id(id + '_result').value.slice(0, $id(id + '_result').value.length - 1);
        }
        if (calc_array[id][0] == '=') {
            calc_array[id][2] = $id(id + '_result').value;
            calc_array[id][3] = 0;
        } else {
            calc_array[id][3] = $id(id + '_result').value;
        }
    } else {
        if (calc_array[id][0] != '=' && calc_array[id][1] != 1) {
            eval('calcul=' + calc_array[id][2] + calc_array[id][0] + calc_array[id][3] + ';');
            $id(id + '_result').value = calcul;
            calc_array[id][2] = calcul;
            calc_array[id][3] = 0;
        }
        calc_array[id][0] = n;
    }
    if (pas == 0) {
        calc_array[id][1] = 1;
    } else {
        pas = 0;
    }
    document.getElementById(id + '_result').focus();
    return true;
}
function add_calc(id, n) {
    if (calc_array[id][1] == 1) {
        $id(id + '_result').value = n;
    } else {
        $id(id + '_result').value += n;
    }
    if (calc_array[id][0] == '=') {
        calc_array[id][2] = $id(id + '_result').value;
        calc_array[id][3] = 0;
    } else {
        calc_array[id][3] = $id(id + '_result').value;
    }
    calc_array[id][1] = 0;
    document.getElementById(id + '_result').focus();
    return true;
}
function init_calc(id) {
    $id(id + '_result').value = 0;
    calc_array[id] = new Array('=', 1, '0', '0', 0);
    document.getElementById(id + '_result').focus();
    return true;
}
function key_detect(id, evt) {
    if ((evt.keyCode > 95) && (evt.keyCode < 106)) {
        var nbr = evt.keyCode - 96;
        add_calc(id, nbr);
    } else if ((evt.keyCode > 47) && (evt.keyCode < 58)) {
        var nbr = evt.keyCode - 48;
        add_calc(id, nbr);
    } else if (evt.keyCode == 107) {
        f_calc(id, '+');
    } else if (evt.keyCode == 109) {
        f_calc(id, '-');
    } else if (evt.keyCode == 106) {
        f_calc(id, '*');
    } else if (evt.keyCode == 111) {
        f_calc(id, '/');
    } else if (evt.keyCode == 110) {
        add_calc(id, '.');
    } else if (evt.keyCode == 190) {
        add_calc(id, '.');
    } else if (evt.keyCode == 188) {
        add_calc(id, '.');
    } else if (evt.keyCode == 13) {
        f_calc(id, '=');
    } else if (evt.keyCode == 46) {
        f_calc(id, 'ce');
    } else if (evt.keyCode == 8) {
        f_calc(id, 'nbs');
    } else if (evt.keyCode == 27) {
        f_calc(id, 'ce');
    }
    return true;
}
function mOver(obj) {
    obj.style.backgroundColor = "#FFD4E9";
}
function mOut(obj) {
    obj.style.backgroundColor = "#E6E6E6";
}