我想将选项更改为无线电类型的东西。我还希望这些商品具有不同的价格，具体取决于将要购买的商品的尺寸。
例如： Caffe Latte（小）将定价为15，而Caffe Latte（大）定价为30
我该怎么办？ 非常感谢您的帮助！
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" >
<link rel="stylesheet" href="sbwadcss.css">
<script type="text/javascript">
var totalPrice=0;
function AddItem()
{
var itemPrice = parseInt(0);
var itemName = document.getElementById('itemName').value;
var qty = document.getElementById('txtQty').value.trim();
var subTotal = document.getElementById('subTotal').value;
if (qty!="")
{
if (qty.match(/^[0-9]+$/))
{
if(itemName=="Caffe Latte")
itemPrice = (19*qty);
else if (itemName=="Cappuccino")
itemPrice = (19*qty);
else if(itemName=="Caffe Americano")
itemPrice = (17*qty);
else if(itemName=="Flat WHite")
itemPrice = (15*qty);
else
itemPrice = (15*qty);
document.getElementById("subTotal").value = itemPrice;
totalPrice+=itemPrice;
if(itemName=="Caffe Latte")
{
document.getElementById('iName').value += "\n" + "Caffe Latte" ;
document.getElementById('price').value += "\n" + itemPrice;
document.getElementById('qty').value += "\n" + qty;
document.getElementById('totalPrice').value = totalPrice;
}
else if (itemName=="Cappuccino")
{
document.getElementById('iName').value += "\n"+ "Cappuccino";
document.getElementById('price').value += "\n" + itemPrice;
document.getElementById('qty').value += "\n" +qty;
document.getElementById('totalPrice').value = totalPrice;
}
else if(itemName=="Caffe Americano")
{
document.getElementById('iName').value += "\n" + "Caffe Americano";
document.getElementById('price').value += "\n" +itemPrice;
document.getElementById('qty').value +="\n" + qty;
document.getElementById('totalPrice').value = totalPrice;
}
else if(itemName=="Flat WHite")
{
document.getElementById('iName').value += "\n" + "Flat White";
document.getElementById('price').value += "\n" +itemPrice;
document.getElementById('qty').value +="\n" + qty;
document.getElementById('totalPrice').value = totalPrice;
}
else
{
document.getElementById('iName').value += "\n" + "Espresso";
document.getElementById('price').value +="\n" + itemPrice;
document.getElementById('qty').value +="\n" + qty;
document.getElementById('totalPrice').value = totalPrice;
}
}
else
alert("INVALID INPUT FOR QUANTITY! ");
}
else
alert("INVALID INPUT FOR QUANTITY ! ");
}
function Payment()
{
var payment = document.getElementById('payment').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("No Amount Entered!!");
}
function NewTransaction(target1,target2,target3)
{
var OK = confirm("Do you want to make New Transaction? \n OK or CANCEL? ");
if (OK==true)
target1.value="";
target2.value="";
target3.value="";
totalPrice=0;
document.getElementById('iName').value ="";
document.getElementById('price').value ="";
document.getElementById('qty').value ="";
document.getElementById('totalPrice').value ="";
document.getElementById('payment').value="";
document.getElementById('change').value="";
}
</script>
</head>
<body>
<div id="form">
<legend class="wrap"><h3></h3></legend>
<h4>SALES TRANSACTION</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>Cappuccino</option>
<option>Caffe Americano</option>
<option>Flat White</option>
<option>Espresso</option>
</select>
</div>
</div>
<div class="content">
<div class="left">
Quantity:
</div>
<div class="right">
<input type="text" id="txtQty">
</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">
<a href="SBWAD.html"><input type="button" value="CANCEL" style="background-color: grey; margin:3px; border-radius: 5px;"></a>
</div>
<div class="btnContent">
<input type="button" value="NEW TRANSACTION" onclick="NewTransaction(document.getElementById('itemName'),document.getElementById('txtQty'),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="10" rows="10" class="inline-txtarea" id="iName" disabled="disable"></textarea>
</div>
<div class="inline-div">
<p align="center">Price</p>
<textarea cols="10" rows="10" class="inline-txtarea" id="price" disabled="disable"></textarea>
</div>
<div class="inline-div">
<p align="center">Quantity</p>
<textarea cols="10" rows="10" 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>
答案 0 :(得分：0)
将价格放入一个对象并从那里读取，具体取决于小型与大型的选择。
var prices = {'small': 15, 'large': 30};