AP102 2016/4/27 getElementById
HTML
利用
<form>
<fieldset>
<legend></legend>
<label></label>
<input type="" name="" id="">
</fieldset>
</form>
去做一個表單
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<script src="new.js"></script>
<title>Calculator</title>
</head>
<body>
<form id="theForm">
<fieldset>
<legend>Calculator</legend>
<div>
<label for="quantity">Quantity : </label>
<input type="number" name="quantity" min="0" 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="Submit" id="submit">
</div>
</fieldset>
</form>
</body>
</html>css
body{
font:normal 120% Tahoma,Verdana,Arial;
background: #ccc;
}
form{
background: #fff;
border: 1px solid #ddd;
padding: 10px;
width:180px;
}
div{
margin: 8px 0px;
/*border: 1px solid red;*/
}
input{
border-radius: 3px;
}JS
function doFirst(){
document.getElementById('theForm').onsubmit=calculate;
}
function calculate(e){//e=event的縮寫
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++;
total = total * tax;
total = total - discount;
total = total.toFixed(2); //格式化
document.getElementById('total').value = total;
alert(e.target);
alert(e.type);
return false;
}
window.addEventListener('load',doFirst,false);
Comments
Post a Comment