我似乎无法使我的代码正常工作
[英]I can't seem to get my code to work
问题描述
I want to create a coffee shop transaction form. 
我想创建一个咖啡店交易表格。 I've tried everything i know. 我已经尽力了。 but still nothing. 但还是一无所有。 this is a test design I have here the Item Name and Item Size. 这是一个测试设计，我这里有项目名称和项目大小。 Each item will have different prices, example: Item X (size a = 5, size b = 10, size c = 15), Item Y (size a = 6, size b = 11, size c = 12)... then a quantity will be entered, after clicking the "ADD ITEM" button, the sub Total(not sure) should appear on the boxes on the left. 每个商品都有不同的价格，例如：商品X（大小a = 5，大小b = 10，大小c = 15），商品Y（大小a = 6，大小b = 11，大小c = 12）...然后单击“添加项目”按钮后，将输入数量，子总计（不确定）应出现在左侧的框中。
how should i make this work? 我应该如何做这项工作？ thanks. 谢谢。
PS: sorry if you find it hard to understand what i say. PS：对不起，如果您觉得我的意思很难理解。 thanks tho! 谢谢你！ just to add, i used the sizes offered by star bucks. 补充一下，我使用了星巴克提供的尺寸。
<!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>
1 个解决方案
解决方案1
2 2017-08-05 11:52:10
Maybe you use an object for the product's prices. 也许您使用一个对象作为产品的价格。
Changes: 变化：
- using small variable and function names 使用小变量和函数名
-
idfor collections集合的id - some other
id其他一些id - using an object for propducts and their size 使用对象制作产品及其尺寸
- exit early principle for checking requirements 退出早期检查原则
- collections does not show an empty line in advance 集合不预先显示空行
- keeping
totalPricewhile payment付款时保持totalPrice - complete reseting all inputs in
newTransaction完成重置newTransaction所有输入 -
newTransactionwithout parameters不带参数的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.
相关问题
我似乎无法让jQuery新消息滚动在我的代码中工作 - I can't seem to get jquery new message scroll to work in my code
我似乎无法使用 while 循环来处理我的代码 - I can not seem to get a while loop to work with my code
我似乎无法让我的Javascript表单验证正常工作 - I can't seem to get my Javascript form validation to work
我似乎无法让我的 React 私人路线工作 - I can't seem to get my React private route to work
我似乎无法使我的下拉代码正常运行 - I can't seem to get my dropdown code to function properly
似乎无法让我的jQuery工作 - Can't seem to get my jQuery to work
对 Javascript 非常陌生。 似乎无法让 1 个函数在我的代码中工作（berekenBedrag）。 需要计算总数 - Very new to Javascript. Can't seem to get 1 function to work in my code (berekenBedrag). Needs to calculate the total
我似乎无法让我的代码显示我的计算，我是否缺少 output 标签？ - I can't seem to get my code to display my calculation, am I missing an output tag?
我似乎无法通过按钮来在登录屏幕上提交信息 - I can't seem to get my a button to work to submit info on my login screen
我似乎无法在页面上使用任何jQuery事件 - I can't seem to get any jQuery events to work on my page
相关标签