Ich kann nicht scheinen, um meinen Code zu arbeiten

Ich möchte eine Coffee-Shop-Transaktionsformular erstellen. Ich habe alles versucht, was ich weiß. aber immer noch nichts. this is a test design Ich habe hier den Artikelnamen und Artikelgröße. Jeder Artikel hat unterschiedliche Preise, Beispiel: Artikel X (Größe a = 5, Größe b = 10, Größe c = 15), Artikel Y (Größe a = 6, Größe b = 11, Größe c = 12) ... dann Eine Menge wird eingegeben, nach dem Klicken auf die Schaltfläche "ARTIKEL HINZUFÜGEN" sollte die Untersumme (nicht sicher) in den Feldern auf der linken Seite erscheinen.Ich kann nicht scheinen, um meinen Code zu arbeiten

Wie soll ich das machen? Vielen Dank.

PS: Entschuldigung, wenn Sie es schwer finden zu verstehen, was ich sage. danke tho! nur um hinzuzufügen, habe ich die Größen von Star Dollars verwendet.

<!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>

Quelle

2017-08-05 NoobProgrammer

Bitte fügen html Reseting oder setzen Snippet des Problems –

arbeiten i bearbeitet der Thread und fügte mein HTML hinzu. Ich bin wirklich verwirrt wie die Dinge funktionieren. Vielleicht sollte ich die Grundlagen lesen. – NoobProgrammer

Vielleicht verwenden Sie ein Objekt für die Produktpreise.

Änderungen:

mit kleinen Variablen- und Funktionsnamen
id für Sammlungen
einige andere id
ein Objekt für propducts und deren Größe mit
Ausgang früh Prinzip für Anforderungen Überprüfung
Sammlungen zeigt keine leere Zeile in vorrücken
halten totalPrice während Zahlung
komplett alle Eingaben in newTransaction
newTransaction ohne Parameter

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>

Quelle

2017-08-05 11:52:10

oh. Ich wusste nichts über diese Groß- und Kleinschreibung. Danke für die Hilfe. – NoobProgrammer

Ich kann nicht scheinen, um meinen Code zu arbeiten

Antwort

Verwandte Themen