HTML-JavaScript-計算圖表

萬里無雲便是我發表於2017-11-11
HTMLJavaScript
/* 
*Copyright (c) 2017，煙臺大學計算機學院 
All rights reserved. 
*檔名稱：關於HTML的練習
*作    者：張晴晴 
*完成日期：2017年11月11日 
*版 本 號：v1.0  * 
*問題描述：HTML5-JavaScript
*輸入描述： 無
*程式輸出： 無
*/ 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>簡易購物車</title>
<script>
   function cal(){
	   var a=parseInt(document.getElementById("amount").value);
	   var p=parseInt(document.getElementById("price").value);
	   var m=parseInt(document.getElementById("money").value);
	   var sum_up=a*p+m;
	   document.getElementById("sum").value=sum_up;
	   } 


</script>
</head>

<body>
<table width="200" border="1" bordercolor="#BCDABF" bgcolor="#FFCCCC">
  <tr align="center">
    <td colspan="5">簡易購物車</td>

  </tr>
   <tr align="center">
    <td nowrap>商品名稱</td>
    <td>數量</td>
    <td>單價</td>
    <td>運費</td>
    <td><input type="button" value="合計" onClick="cal()"></td>
  </tr>
  <tr align="center">
    <td nowrap>跑跑道具</td>
    <td><input type="text" id="amount"></td>
    <td><input type="text" id="price"></td>
    <td><input type="text" id="money"></td>
    <td nowrap><input type="text" id="sum" >美元</td>
  </tr>
</table>

</body>
</html>

執行結果：

換另一種寫法，為什麼點選按鈕不出結果。。。。(已改正：沒有寫form表單控制元件，函式去哪找form[0]???)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>簡易購物車</title>
<script>
   function cal(){
	   var a=parseInt(document.forms[0].amount.value);
	   var p=parseInt(document.forms[0].price.value);
	   var m=parseInt(document.forms[0].money.value);
	   document.forms[0].sum.value=a*p+m;
	   } 
</script>
</head>

<body>
<form>
<table width="200" border="1" bordercolor="#BCDABF" bgcolor="#FFCCCC">
  <tr align="center">
    <td colspan="5">簡易購物車</td>

  </tr>
   <tr align="center">
    <td nowrap>商品名稱</td>
    <td>數量</td>
    <td>單價</td>
    <td>運費</td>
    <td><input type="button" value="合計" onClick="cal()"></td>
  </tr>
  <tr align="center">
    <td nowrap>跑跑道具</td>
    <td><input type="text" name="amount"></td>
    <td><input type="text" name="price"></td>
    <td><input type="text" name="money"></td>
    <td nowrap><input type="text" name="sum">美元</td>
  </tr>
</table>
</form>
</body>
</html>





相關文章