In my program it asks for which size of the pizza you want which are radio buttons as well as toppings which are all checkbox items. Then there is a select tag for pickup or delivery. When you confirm the order it will print the size and price of the pizza, the toppings chosen, whether you choose pick up or delivery and the total. The problems I am having are one, I am not sure how to print multiple checkbox values without overwriting another inside the table, they need to be displayed one after another if multiple checkboxes are checked. My second problem is for the select tag. I know you could do .checked for the select tag but if there are multiple options how do you check for the options and then print that option selected.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<title>Drackley_Chapter 6 program</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script type="text/javascript">
function getPizza(){
var price = 0;
var size = "";
var top = 0;
var total = 0;
var first_last = document.getElementById("first_last");
document.getElementById("name_result").innerHTML = first_last.value + "'s Order";
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var s3 = document.getElementById("s3");
var s4 = document.getElementById("s4");
if(s1.checked==true)
{
price = 8.00;
size = "Small";
}
//alert("The size selected is: "+s1.value);
else if(s2.checked==true)
{
price = 10.00;
size = "Medium";
}
//alert("The size selected is: "+s2.value);
else if(s3.checked==true)
{
price = 12.00;
size = "Large";
}
//alert("The size selected is: "+s3.value);
else if(s4.checked==true)
{
price = 14.00;
size = "X-Large";
}
//alert("The size selected is: "+s4.value);
else
alert("No size selected");
document.getElementById("p_result").innerHTML = "$" + price;
document.getElementById("s_result").innerHTML = size;
var t1 = document.forms["order"]["topping1"].checked;
var t2 = document.forms["order"]["topping2"].checked;
var t3 = document.forms["order"]["topping3"].checked;
var t4 = document.forms["order"]["topping4"].checked;
var t5 = document.forms["order"]["topping5"].checked;
if(t1 == true) {
top = top + 1.5;
document.getElementById("t_options").innerHTML = "Pepperoni";
}
else
top = top;
if(t2 == true) {
top = top + 1.5;
document.getElementById("t_options").innerHTML = "Sausage";
}
else
top = top;
if(t3 == true) {
top = top + 1.5;
}
else
top = top;
if(t4 == true) {
top = top + 1.5;
}
else
top = top;
if(t5 == true) {
top = top + 1.5;
}
else
top = top;
document.getElementById("t_result").innerHTML = "$ " + top;
var select = document.getElementById("pick_deliv");
if (select.checked == true)
document.getElementById("sel_opt").innerHTML = select;
alert(select.options[select.selectedIndex].value);
total = total + price + top;
document.getElementById("total_result").innerHTML = "Your Current Total is $ " + total;
}
</script>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h1>Chapter 6 Pizza Program </h1>
<form id="order" name="order">
<label for="first_last"> Name:</label>
<input type="text" name="first_last" id="first_last" placeholder="First Last"> <br>
<p> Please choose your size of pizza:</p>
<input type="radio" name="size" id="s1" value="Small"> Small - $8</input><br>
<input type="radio" name="size" id="s2" value="Medium"> Medium - $10</input><br>
<input type="radio" name="size" id="s3" value="Large"> Large - $12</input><br>
<input type="radio" name="size" id="s4" value="X-Large"> Extra Large - $14</input><br>
<p>Please choose your topping ($1.50 each): </p>
<input type="checkbox" name="topping1" id="topping1" value="pepperoni"> Pepperoni </input><br>
<input type="checkbox" name="topping2" id="topping2" value="sausage"> Sausage </input><br>
<input type="checkbox" name="topping3" id="topping3" value="bacon"> Bacon </input><br>
<input type="checkbox" name="topping4" id="topping4" value="onions"> Onions </input><br>
<input type="checkbox" name="topping5" id="topping5" value="spinach"> Spinach </input><br> <br>
<select name="pick_deliv" id="pick_deliv">
<option value="Pickup">Pick up </option>
<option value="Delivery">Delivery </option>
</select> <br> <br>
</form>
<button onclick="getPizza()" id="btn1"> Confirm Order</button>
<h1 id="name_result"> Your Order </h1> <br> <br>
<table style="width:50%">
<tr>
<th>Description</th>
<th>Option</th>
<th>Price</th>
</tr>
<tr>
<td> Size </td>
<td id="s_result"> </td>
<td id="p_result"> </td>
</tr>
<tr>
<td> Toppings </td>
<td id="t_options"> </td>
<td id="t_result"> </td>
</tr>
<tr>
<td> Pick-Up/Delivery</td>
<td id="sel_opt"> </td>
<td id="sel_price"> </td>
</tr>
</table>
<h4 id="total_result">Your Current Total is $ </h4>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire