一个js写的计算器

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    meta http-equiv="X-UA-Compatible" content="ie=edge">
    title>Documenttitle>
    script>
        var display;
        var result="";
        var calresults;
        display=document.getElementById("xianshi");
        function calculator(){
        result+=event.srcElement.innerText;
        // alert(result);
        xianshi.innerText=result;

        }
        function resultscalcaulte(){
        var display=document.getElementById("xianshi");
        calresults=eval(result);
        //eval()函数可以计算某个字符串，并执行其中的js代码
        //语法eval（string）
        //返回值通过计算string得到的值
        //该方法只接受原始字符串作为参数，如果string参数不是原始字符串，
        //那么该方法将不作任何改变的返回，不要为eval（）函数传递String对象来作为参数 
        display.innerText=calresults;
        }
        function empty(){
        result="";
        xianshi.innerText=result;
        }
        function back(){
            if (result!="") {
                result=result.substring(0, result.length - 1);
                xianshi.innerText=result;
            }
        }
    script>
    style>
        .display{
            font-size: 40px;
            text-align: right;
            padding-top: 20px;
        }
        #outer{
            background-color: beige;
            height: 500px;
            width: 400px;
            margin: 0 auto;
            padding-top: 20px;
        }
        #screen{
            background-color: gray;
            height: 100px;
            width: 340px;
            margin: 0 auto;
        }
        #calcula{
            background-color: gray;
            height: 350px;
            width: 340px;
            margin: 0 auto;
            margin-top: 20px;
            padding-top: 25px;
        }
        table{
            margin: 0px 20px 20px 20px;
        }
        td{
            
            color: cadetblue;
            background-color: beige;
            height: 60px;
            width: 75px;
            text-align: center;
        }
        td:active{
            background-color: grey;
        }

        
    style>
head>
body>
    div id="outer">
        div id="screen">
      
            div id="xianshi" class="display">div>
        div>
        div id="calcula">
            table>
                tr>
                    td onclick="calculator()">+td>
                    td onclick="calculator()">-td>
                    td onclick="calculator()">*td>
                    td onclick="calculator()">/td>
                tr>
                tr>
                    td onclick="calculator()">7td>
                    td onclick="calculator()">8td>
                    td onclick="calculator()">9td>
                    td rowspan="3" onclick="resultscalcaulte()">=td>
                tr>
                tr>
                    td onclick="calculator()">4td>
                    td onclick="calculator()">5td>
                    td onclick="calculator()">6td>
                    
                tr>
                tr>
                    td onclick="calculator()">1td>
                    td onclick="calculator()">2td>
                    td onclick="calculator()">3td>
                    
                tr>
                tr>
                    td onclick="empty()">Ctd>
                    td onclick="calculator()">0td>
                    td onclick="calculator()">.td>
                    td onclick="back()">Dtd>
                tr>
            table>
            
        div>
    div>
body>
html>