[jQuery筆記] 簡單商品計算統計
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>商品統計</title> <!--jquery版本差異會導致IE瀏覽器兼容問題,如果對兼容性要求高的話，最好使用原生JS寫。--> <script src="js/jquery-1.8.3.min.js"></script> </head> <body> 商品名稱:<input type="text" id="spNanme" name="spName"></br> 商品單價:<input type="text" id="spPrice"></br> 購買數量:<input type="number" id="spNum"></br> 共計:<input type="text" id="total" readonly="readonly"></br> <button type="button" id="btn">結賬</button> <script> //對id選擇器btn,使用click事件 $("#btn").click(function(){ //console.log($("#spPrice").val()); //console.log($("#spNum").val()); //var定義一個變數spPrice,變數的值是id選擇器#spPrice的值 var spPrice=$("#spPrice").val(); //var定義一個變數spNum,變數的值是id選擇器#spNum的值 var spNum=$("#spNum").val(); //var定義一個變數total,變數的值是spPrice*spNum乘積 var total=spPrice*spNum; //console.log(total) //找到id選擇器的#total,將值定義成變數total的值 $("#total").val(total); }); </script> </body> </html>
