私のコードが動作しないようです。

コーヒーショップの取引フォームを作成したいと思います。私は知っているすべてを試しました。まだ何もない。 this is a test design私はここに商品名と商品サイズがあります。アイテムX（サイズa = 5、サイズb = 10、サイズc = 15）、アイテムY（サイズa = 6、サイズb = 11、サイズc = 12）数量が入力され、「項目を追加」ボタンをクリックすると、左のボックスに小計（不明）が表示されます。私のコードが動作しないようです。

どうすればいいですか？ありがとう。

PS：申し訳ありませんが、あなたが私の言うことを理解することが難しい場合は、ありがとうtho！ちょうど追加するために、私はスターの金額によって提供されるサイズを使用しました。

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

なしnewTransaction

newTransactionにすべての入力をreseting支払い

完全には私が編集したHTMLを追加したり、問題 –

の作業スニペットを入れてくださいながらtotalPriceを維持

を進めますスレッドと私のHTMLを追加しました。私は物事の仕方を本当に混乱させました。多分私は基本を読むべきです。 – NoobProgrammer

多分、製品の価格にオブジェクトを使用します。

変更：

小さな変数名や関数名の要件をチェックするためpropductsのオブジェクトとその大きさ
退出早期原理を使用して、コレクション
他のいくつかのid
ため
idを使用して
コレクションに空の行が表示されないパラメータ

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

oh。私はその大文字小文字については知らなかった。助けてくれてありがとう。 – NoobProgrammer

私のコードが動作しないようです。

答えて

関連する問題