HTML实现简易计算器

随便写的，可能有bug，可以在评论区指出哈。
HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AI简易计算器</title>
</head>
<body>
<table id="calculater" onClick="calculater()"><tr><td id="display" colspan="5">0</td></tr><tr><td class="numberkey" >1</td><td class="numberkey" >2</td><td class="numberkey" >3</td><td class="numberkey" >+</td><td class="numberkey"  id="deletesign">c</td>   </tr><tr><td class="numberkey" >4</td><td class="numberkey" >5</td><td class="numberkey" >6</td><td class="numberkey" >-</td><td rowspan="3" id="equality" onclick="resultscalcaulte()">=</td> </tr><tr><td class="numberkey" >7</td><td class="numberkey" >8</td><td class="numberkey" >7</td><td class="numberkey" >*</td></tr><tr ><td class="numberkey" >+/-</td><td class="numberkey" >0</td><td class="numberkey" >.</td><td class="numberkey" >/</td>            </tr>
</body>
</html>

CSS代码：

*{padding:0;margin:1px;}#calculater{margin: auto;margin-top: 30px;border: solid 6px #2371D3;border-spacing: 0px;}#display{width: 100%;height: 30px;border-bottom: solid 4px #2371D3;font-weight: bold;color: #193D83;font-family: 黑体;padding-left: 2px;}.numberkey{cursor: pointer;width: 40px;height: 30px;border: solid 1px #FFFFFF;background: #2371D3;color: #ffffff;text-align: center;font-weight: bold;font-family: 黑体;}#equality{cursor: pointer;width: 40px; height: 100%;background: #2371D3;border: solid 1px #FFFFFF;color: #ffffff;text-align: center;font-weight: bold;font-family: 黑体; }.numberkey:hover{background: #EA6F30; }#equality:hover{background: #EA6F30; }

Javascript代码：

var results="";var calresults="";function calculater(){if (event.srcElement.innerText=="=") {return;}results+=event.srcElement.innerText;display.innerText=results;}function resultscalcaulte(){calresults=eval(results);display.innerText=calresults;}