html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/style.css">
<script src="new.js"></script>
<title>Calculator</title>
</head>
<body>
<form method="post" id="theForm">
<fieldset>
<legend>Calculator</legend>
<div>
<label for="quantity">Quantity</label>
<input type="number" min="0" name="quantity" id="quantity">
</div>
<div>
<label for="price">Price Per Unit</label>
<input type="text" name="price" id="price">
</div>
<div>
<label for="tax">Tax Rate(%)</label>
<input type="text" name="tax" id="tax">
</div>
<div>
<label for="discount">Discount</label>
<input type="text" name="discount" id="discount">
</div>
<div>
<label for="total">Total</label>
<input type="text" name="total" id="total">
</div>
<div>
<input type="submit" value="Calculate" id="submit">
</div>
</fieldset>
</form>
</body>
</html>
利用 document.getElementById('your id') 來指定要抓的value....
然後計算完之後 再把 值 弄回 document.getElementById('total').value = total;
就會看到計算完的數值....
javascript 的部分
function doFirst(){
document.getElementById('theForm').onsubmit = calculate;
}
function calculate(){
var quantity = document.getElementById('quantity').value;
var price = document.getElementById('price').value;
var tax = document.getElementById('tax').value;
var discount = document.getElementById('discount').value;
var total = quantity * price;
tax = tax / 100; /* tax /= 100; */
tax++;
total = total * tax; /* total *= tax; */
total = total - discount; /* total -= discount; */
total = total.toFixed(2); /* 格式化 */
document.getElementById('total').value = total;
return false;
}
window.addEventListener('load', doFirst, false);
沒有留言:
張貼留言