我似乎無法讓我的代碼工作

我想創建一個咖啡店交易表單。我已經嘗試了我所知道的一切。但仍然沒有。 this is a test design我在這裏的項目名稱和項目大小。每個項目都有不同的價格，例如：項目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"> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<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>

來源

2017-08-05 NoobProgrammer

請添加HTML或把工作您的問題 –

的片斷我編輯線程並添加了我的HTML。我真的很困惑如何工作。也許我應該閱讀基礎知識。 – NoobProgrammer

也許你使用一個對象的產品價格。

變化：

用小變量和函數名
id使用的propducts的對象，它們的大小
退出早原則檢查要求集合
其他一些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"> 
 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
     <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>

來源

2017-08-05 11:52:10

哦。我不知道那個大小寫的東西。謝謝您的幫助。 – NoobProgrammer

我似乎無法讓我的代碼工作

回答

相關問題