Question

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.

how should i make this work? thanks.

PS: sorry if you find it hard to understand what i say. 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">
 &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>

Answer 1

Maybe you use an object for the product's prices.

Changes:

using small variable and function names
id for collections
some other 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 totalPrice while payment
complete reseting all inputs in newTransaction
newTransaction without parameters

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>

I can't seem to get my code to work

1 个答案:

I can&#39;t seem to get my code to work

1 个答案:

I can't seem to get my code to work