更改要在屏幕上显示的警报jquery

Question

我正在构建一个计算器，需要知道如何在点击时显示一个数字，到目前为止我只能创建一个警报。这是代码。

var add = function (x,y){
    return x+y;
};
var subtract = function (x,y){
    return x-y;
};
var multiply = function (x,y){
    return x*y;
};
var divide = function (x,y){
    return x/y;
};

$(document).ready(function() {
    $(".num").click(function(){
        alert("button");
    }); 
});

这里是html的一瞥：

<div id="wrapper">
<table id="grid">
    <tr>
        <td><button class="num">7</button></td>
        <td><button class="num">8</button></td>
        <td><button class="num">9</button></td>
        <td><button class="sym">+</button></td>
    </tr>
</table>
</div>

谢谢！

Answer 1

你可以使用这样的东西

$(document).ready(function() {
    $(".num , .sym").click(function(){
        $('#screen').append($(this).text());
    });
    $('.total').on('click',function(){
        var calc = eval($('#screen').text());
        $('#screen').text(calc);
    });
    $('.clear').on('click',function(){
        $('#screen').text('');
    });
});

#screen{
  padding : 10px;
  background : red;
  color: #fff;
  font-size: 20px;
}
.num , .sym , .clear{
  height : 30px;
  width : 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">

<div id="screen">

</div>
<table id="grid">
    <tr>
        <td><button class="clear">C</button></td>
    </tr>
    <tr>
        <td><button class="num">7</button></td>
        <td><button class="num">8</button></td>
        <td><button class="num">9</button></td>
        <td><button class="sym">+</button></td>
    </tr>
    <tr>
        <td><button class="num">4</button></td>
        <td><button class="num">5</button></td>
        <td><button class="num">6</button></td>
        <td><button class="sym">-</button></td>
    </tr>
    <tr>
        <td><button class="num">1</button></td>
        <td><button class="num">2</button></td>
        <td><button class="num">3</button></td>
        <td><button class="sym">*</button></td>
    </tr>
    <tr>
        <td><button class="total">=</button></td>
    </tr>
</table>
</div>