更改提醒以在屏幕上顯示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>