[英]I can't seem to get my code to work
我想創建一個咖啡店交易表格。 我已經盡力了。 但還是一無所有。 這是一個測試設計,我這里有項目名稱和項目大小。 每個商品都有不同的價格,例如:商品X(大小a = 5,大小b = 10,大小c = 15),商品Y(大小a = 6,大小b = 11,大小c = 12)...然后單擊“添加項目”按鈕后,將輸入數量,子總計(不確定)應出現在左側的框中。
我應該如何做這項工作? 謝謝。
PS:對不起,如果您覺得我的意思很難理解。 謝謝你! 補充一下,我使用了星巴克提供的尺寸。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" >
<link rel="stylesheet" type="text/css" href="sbwadcss.css">
<script type="text/javascript">
var TotalPrice=0;
function chooseItem()
{
var itemPrice = parseInt(0);
var itemName = document.getElementById('itemName').value;
var itemSize = document.getElementById('itemSize').value;
var qty = document.getElementById('QuanVal').value.trim();
var subTotal = document.getElementById('subTotal').value;
if (qty!="")
{
if (qty.match(/^[0-9]+$/))
{
if(itemName=="Caffe Latte")
{
if(itemSize=="Tall")
itemPrice = (75*qty);
else if(itemSize=="Grande")
itemPrice = (105*qty);
else(itemSize=="Venti")
itemPrice = (135*qty);
}
if(itemName=="Caffe Americano")
{
if(itemSize=="Tall")
itemPrice = (80*qty);
else if(itemSize=="Grande")
itemPrice = (100*qty);
else(itemSize=="Venti")
itemPrice = (120*qty);
}
if(itemName=="Cappuccino")
{
if(itemSize=="Tall")
itemPrice = (70*qty);
else if(itemSize=="Grande")
itemPrice = (95*qty);
else(itemSize=="Venti")
itemPrice = (120*qty);
}
if(itemName=="Espresso")
{
if(itemSize=="Tall")
itemPrice = (85*qty);
else if(itemSize=="Grande")
itemPrice = (105*qty);
else(itemSize=="Venti")
itemPrice = (125*qty);
}
if(itemName=="Flat White")
{
if(itemSize=="Tall")
itemPrice = (75*qty);
else if(itemSize=="Grande")
itemPrice = (100*qty);
else(itemSize=="Venti")
itemPrice = (125*qty);
}
}
document.getElementById("subTotal").value = itemPrice;
TotalPrice+=itemPrice;
if(itemName=="Caffe Latte")
{
document.getElementById('itemName').value += "\n" + "Caffe Latte" ;
document.getElementById('price').value += "\n" + itemPrice;
document.getElementById('qty').value += "\n" + qty;
document.getElementById('TotalPrice').value = TotalPrice;
}
else if(itemName=="Caffe Americano")
{
document.getElementById('itemName').value += "\n" + "Caffe Americano" ;
document.getElementById('price').value += "\n" + itemPrice;
document.getElementById('qty').value += "\n" + qty;
document.getElementById('TotalPrice').value = TotalPrice;
}
else if(itemName=="Cappuccino")
{
document.getElementById('itemName').value += "\n" + "Cappuccino" ;
document.getElementById('price').value += "\n" + itemPrice;
document.getElementById('qty').value += "\n" + qty;
document.getElementById('TotalPrice').value = TotalPrice;
}
else if(itemName=="Espresso")
{
document.getElementById('itemName').value += "\n" + "Espresso" ;
document.getElementById('price').value += "\n" + itemPrice;
document.getElementById('qty').value += "\n" + qty;
document.getElementById('TotalPrice').value = TotalPrice;
}
else
{
document.getElementById('itemName').value += "\n" + "Flat White" ;
document.getElementById('price').value += "\n" + itemPrice;
document.getElementById('qty').value += "\n" + qty;
document.getElementById('TotalPrice').value = TotalPrice;
}
}
else
alert("Invalid Quantity!!");
}
else
alert("Please Enter Quantity!!");
function Payment()
{
var payment = document.getElementById('paymnet').value.trim();
var TotalPrice = document.getElementById('TotalPrice').value;
if (payment !="")
{
if (payment.match(/^[0-9]+$/))
{
if (TotalPrice < payment)
{
var change = payment - TotalPrice;
document.getElementById('change').value= "Php" + change + ".00";
TotalPrice=0;
}
else
alert("Invalid Amount Entered!!");
}
else
alert("Invalid Amount Entered!!");
}
else
alert("Please Entered!!");
}
function NewTransaction(targ1,targ2,targ3)
{
var OK = confirm("Are you sure you want to make New Transaction? \n OK or CANCEL? ");
if (OK==true)
targ1.value="";
targ2.value="";
targ3.value="";
TotalPrice=0;
document.getElementById('itemName').value ="";
document.getElementById('price').value ="";
document.getElementById('qty').value ="";
document.getElementById('TotalPrice').value ="";
document.getElementById('payment').value="";
document.getElementById('change').value="";
}
</head>
<body>
<div id="form">
<legend class="wrap"><h3>COFFEE SHOP!</h3></legend>
<h4>TRANSACTION FORM</h4>
<div class="content">
<div class="left">
Item Name:
</div>
<div class="right">
<select id="itemName">
<option selected disabled="disabled">SELECT ITEM</option>
<option>Caffe Latte</option>
<option>Caffe Americano</option>
<option>Cappuccino</option>
<option>Espresso</option>
<option>Flat White</option>
</select>
</div>
</div>
<div class="content">
<div class="left">
Item Size:
</div>
<div class="right">
<select id="itemSize">
<option selected disabled="disabled">SELECT SIZE</option>
<option>Tall</option>
<option>Grande</option>
<option>Venti</option>
</select>
</div>
</div>
<div class="content">
<div class="left">
Quantity:
</div>
<div class="right">
<input type="text" id="QuanVal">
</div>
</div>
<div class="content">
<div class="left">
Price:
</div>
<div class="right">
<input type="text" id="subTotal" disabled="disabled">
</div>
</div>
<div class="btnContent">
<input type="button" value="ADD ITEM" onclick="AddItem()" style="background-color: grey; margin:3px; border-radius: 5px;">
</div>
<div class="btnContent">
<input type="button" value="NEW TRANSACTION" onclick="NewTransaction(document.getElementById('itemName'),document.getElementById('QuanVal'),document.getElementById('subTotal'))" style="background-color: grey; margin:3px; border-radius: 5px;">
</div>
</div>
<div id="form2">
<div class="content">
<div class="inline-div">
<p align="center">Item Name</p>
<textarea cols="15" rows="15" class="inline-txtarea" id="itemName" disabled="disable"></textarea>
</div>
<div class="inline-div">
<p align="center">Price</p>
<textarea cols="15" rows="15" class="inline-txtarea" id="price" disabled="disable"></textarea>
</div>
<div class="inline-div">
<p align="center">Quantity</p>
<textarea cols="15" rows="15" class="inline-txtarea" id="qty" disabled="disable"></textarea>
</div>
</div>
<div class="btnContent" style="width: 180px; padding-top: 5px;">
TOTAL PRICE:
<input type="text" id="TotalPrice" disabled="disabled">
</div>
<div class="btnContent" style="width: 180px; padding-left: 18px; padding-top: 5px;">
ENTER PAYMENT:
<input type="text" id="payment">
<input type="button" value="SUBMIT PAYMENT" onclick="Payment()" style="background-color: grey; margin:3px; border-radius: 5px;">
CHANGE :
<input type="text" id="change" disabled="disabled">
</div>
</div>
</body>
</html>
也許您使用一個對象作為產品的價格。
變化:
id
id
totalPrice
newTransaction
所有輸入 newTransaction
var totalPrice = 0, products = { "Caffe Latte": { Tall: 75, Grande: 105, Venti: 135 }, "Caffe Americano": { Tall: 80, Grande: 100, Venti: 120 }, Cappuccino: { Tall: 70, Grande: 95, Venti: 120 }, Espresso: { Tall: 85, Grande: 105, Venti: 125 }, "Flat White": { Tall: 75, Grande: 100, Venti: 125 } }; function addItem() { var itemPrice, itemName = document.getElementById('itemName').value, itemSize = document.getElementById('itemSize').value, quantity = document.getElementById('quantity').value.trim(), subTotal = document.getElementById('subTotal').value; if (!products[itemName]) { alert("Please Enter Item Name!"); return; } if (!(itemSize in products[itemName])) { alert("Please Enter Item Site!"); return; } if (quantity === "") { alert("Please Enter Quantity!"); return; } if (!quantity.match(/^[0-9]+$/)) { alert("Invalid Quantity!!"); return; } itemPrice = quantity * products[itemName][itemSize]; totalPrice += itemPrice; document.getElementById("subTotal").value = itemPrice; document.getElementById('collectionItemName').value += itemName + "\\n"; document.getElementById('collectionPrice').value += products[itemName][itemSize] + "\\n"; document.getElementById('collectionQuantity').value += quantity + "\\n"; document.getElementById('totalPrice').value = totalPrice; } function payment() { var payment = document.getElementById('payment').value.trim(), change; if (!payment) { alert("Please Enter Payment!"); return; } if (!payment.match(/^\\d+$/)) { alert("Invalid Amount Entered!"); return; } if (totalPrice > payment) { alert("Payment is not enough!"); return; } change = payment - totalPrice; document.getElementById('change').value = "Php" + change + ".00"; } function newTransaction() { var ok = confirm("Are you sure you want to make New Transaction? \\n OK or CANCEL? "); if (ok) { totalPrice = 0; document.getElementById('itemName').selectedIndex = 0; document.getElementById('itemSize').selectedIndex = 0; document.getElementById('subTotal').value = ""; document.getElementById('quantity').value = ""; document.getElementById("subTotal").value = ""; document.getElementById('collectionItemName').value = ""; document.getElementById('collectionPrice').value = ""; document.getElementById('collectionQuantity').value = ""; document.getElementById('totalPrice').value = ""; document.getElementById('payment').value = ""; document.getElementById('change').value = ""; } }
<div id="form"> <h3>COFFEE SHOP!</h3> <h4>TRANSACTION FORM</h4> <div class="content"> <div class="left">Item Name:</div> <div class="right"> <select id="itemName"> <option selected disabled="disabled">SELECT ITEM</option> <option>Caffe Latte</option> <option>Caffe Americano</option> <option>Cappuccino</option> <option>Espresso</option> <option>Flat White</option> </select> </div> </div> <div class="content"> <div class="left">Item Size:</div> <div class="right"> <select id="itemSize"> <option selected disabled="disabled">SELECT SIZE</option> <option>Tall</option> <option>Grande</option> <option>Venti</option> </select> </div> </div> <div class="content"> <div class="left">Quantity:</div> <div class="right"><input type="text" id="quantity"></div> </div> <div class="content"> <div class="left">Price:</div> <div class="right"><input type="text" id="subTotal" disabled="disabled"></div> </div> <div class="btnContent"> <input type="button" value="ADD ITEM" onclick="addItem()" style="background-color: grey; margin:3px; border-radius: 5px;"> </div> <div class="btnContent"> <input type="button" value="NEW TRANSACTION" onclick="newTransaction()" style="background-color: grey; margin:3px; border-radius: 5px;"> </div> </div> <div id="form2"> <div class="content"> <div class="inline-div"> <p align="center">Item Name</p> <textarea cols="15" rows="15" class="inline-txtarea" id="collectionItemName" disabled="disabled"></textarea> </div> <div class="inline-div"> <p align="center">Price</p> <textarea cols="15" rows="15" class="inline-txtarea" id="collectionPrice" disabled="disabled"></textarea> </div> <div class="inline-div"> <p align="center">Quantity</p> <textarea cols="15" rows="15" class="inline-txtarea" id="collectionQuantity" disabled="disabled"></textarea> </div> </div> <div class="btnContent" style="width: 180px; padding-top: 5px;"> TOTAL PRICE: <input type="text" id="totalPrice" disabled="disabled"> </div> <div class="btnContent" style="width: 180px; padding-left: 18px; padding-top: 5px;"> ENTER PAYMENT: <input type="text" id="payment"> <input type="button" value="SUBMIT PAYMENT" onclick="payment()" style="background-color: grey; margin:3px; border-radius: 5px;"> CHANGE : <input type="text" id="change" disabled="disabled"> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.