1
我是一名學生，我一直致力於JavaScript和HTML中的比薩訂購計劃。我得到了所有關於來自數組的訂單的信息，其中document.form.item.value，from input type =「number」name =「item」>item披薩。然後我想要顯示訂單。目前我使用此代碼：使用InnerHTML顯示陣列
\t var showOrder = document.getElementById('screen');
\t showOrder.innerHTML = '';
\t document.getElementById("yourOrder").innerHTML = "<u><b>Your Order: </b></u>";
\t document.getElementById("stanPizzaTitle").innerHTML = '<u><b>Standard - $9.95:</b></u>'
\t document.getElementById("hawaiianList").innerHTML = 'Hawaiian x ' + stanPizza[0],
\t document.getElementById("cheeseList").innerHTML = 'Cheese x ' + stanPizza[1],
\t document.getElementById("veggieList").innerHTML = 'Veggie x ' + stanPizza[2],
\t document.getElementById("supremeList").innerHTML = 'Supreme x ' + stanPizza[3],
\t document.getElementById("pepperoniList").innerHTML = 'Pepperoni x ' + stanPizza[4],
\t document.getElementById("gourPizzaTitle").innerHTML = '<u><b>Gourmet: - $15.95</b></u>'
\t document.getElementById("meatloversList").innerHTML = 'Meat Lovers x ' + gourPizza[0],
\t document.getElementById("chickenList").innerHTML = 'Chicken x ' + gourPizza[1],
\t document.getElementById("prawnList").innerHTML = 'Prawn x ' + gourPizza[2];然後用它顯示：
<div id="order"> \t <!-- division to list all the pizzas ordered -->
<p id= "yourOrder"></p>
\t <p id= "stanPizzaTitle"></p>
\t <p id= "hawaiianList"></p>
\t <p id= "cheeseList"></p>
\t <p id= "veggieList"></p>
\t <p id= "supremeList"></p>
\t <p id= "pepperoniList"></p>
\t <p id= "gourPizzaTitle"></p>
\t <p id= "meatloversList"></p>
\t <p id= "chickenList"></p>
\t <p id= "prawnList"></p>
</div>然而，這意味着，當我想要顯示該訂單顯示您已訂購零的項目，就像您訂購0件雞蛋一樣izzas那麼它將不必要地告訴你0雞肉比薩餅。有沒有什麼辦法可以使這樣的物品不被顯示使用這種方式？否則有另一種方法可以實現這一目標嗎？
下面是完整的程序，如果有幫助：
<html>
<title>Pete's Pizzas Ordering Program</title>
<script>
// Title: Pete's Pizzas Ordering Program
// Author: Joel Shepherd - 216032369
// Purpose: Pete's Pizza Ordering program for online customer order
// Verison: 2
// Date Competed:
const stanPizzaCost = 9.50; \t \t // for cost of the standard Pizzas
const gourPizzaCost = 15.50; \t \t // for cost of the gourmet Pizzas+
const delivCharge = 5; \t \t \t // for cost of delivery
var stanPizzaTotal = 0;
var gourPizzaTotal = 0;
function delivery() {
\t delivOption = document.getElementById("delivOption").checked \t //is the order a delivery or not variable
\t return;
\t }
function order() { \t \t //the function that controls all the information about the pizzas
\t delivery()
\t
\t var stanPizza = \t \t \t
\t [
\t \t document.form.hawaiian.value, \t \t // allocating standard pizza types in array and converting to a number
\t \t document.form.cheese.value,
\t \t document.form.veggie.value,
\t \t document.form.supreme.value,
\t \t document.form.pepperoni.value;
\t ]
\t for(i = 0, stanPizzaTotal = 0; i < stanPizza.length; i++) \t // calculate the total number of standard pizzas
\t \t stanPizzaTotal += stanPizza[i]
\t var gourPizza =
\t [
\t \t document.form.meatlovers.value, \t // allocating gourmet pizza types in array and converting to a number
\t \t document.form.chicken.value,
\t \t document.form.prawn.value;
\t ]
\t for(i = 0, gourPizzaTotal = 0; i < gourPizza.length; i++) // calculate the total number of gourmet pizzas
\t \t gourPizzaTotal += gourPizza[i]
\t
\t var pizzaTotal = stanPizzaTotal + gourPizzaTotal \t //calculate the total number of pizzas
\t
\t if(pizzaTotal > 12) { \t \t //checking that they don't order over 12 pizzas
\t \t alert("Sorry but you can only order 12 pizzas, not " + pizzaTotal + "\n(The Page will reload)")
\t \t window.location.reload()
\t \t return;
\t }else { \t
\t \t
\t var showOrder = document.getElementById('screen'); //changing the display to show the order
\t showOrder.innerHTML = '';
\t document.getElementById("yourOrder").innerHTML = "<u><b>Your Order: </b></u>";
\t document.getElementById("stanPizzaTitle").innerHTML = '<u><b>Standard - $9.95:</b></u>'
\t document.getElementById("hawaiianList").innerHTML = 'Hawaiian x ' + stanPizza[0],
\t document.getElementById("cheeseList").innerHTML = 'Cheese x ' + stanPizza[1],
\t document.getElementById("veggieList").innerHTML = 'Veggie x ' + stanPizza[2],
\t document.getElementById("supremeList").innerHTML = 'Supreme x ' + stanPizza[3],
\t document.getElementById("pepperoniList").innerHTML = 'Pepperoni x ' + stanPizza[4],
\t document.getElementById("gourPizzaTitle").innerHTML = '<u><b>Gourmet: - $15.95</b></u>'
\t document.getElementById("meatloversList").innerHTML = 'Meat Lovers x ' + gourPizza[0],
\t document.getElementById("chickenList").innerHTML = 'Chicken x ' + gourPizza[1],
\t document.getElementById("prawnList").innerHTML = 'Prawn x ' + gourPizza[2];
\t
\t confirm = document.createElement("INPUT"); \t \t //button input elements for confirming or canceling the order
confirm.setAttribute("type", "button");
\t confirm.setAttribute("value", "Confirm Order");
confirm.setAttribute("onClick", "calculate()");
\t document.body.append(confirm);
\t
\t clear = document.createElement("INPUT");
clear.setAttribute("type", "button");
\t clear.setAttribute("value", "Cancel Order");
clear.setAttribute("onClick", "window.location.reload()");
\t document.body.append(clear);
\t }
}
function calculate() { \t \t // Function to calculate the total cost for the order
\t \t // adding cost for delivery if checked
\t if (delivOption == true) {
\t var delivery = 1
\t
\t details()
\t } \t else {
\t var delivery = 0
\t details()
\t }
\t var totalPrice = (stanPizzaTotal * stanPizzaCost) + , \t //calculate the total price
\t \t \t \t \t (gourPizzaTotal * gourPizzaCost) + ,
\t \t \t \t \t (delivery * delivCharge);
}
function details() { \t \t //function to collect all the details of the customer
\t if (delivOption == true) { \t \t //get info for name, phone and address for delivery
\t var delivName = prompt("Please enter a name for the Delivery")
\t var delivAddress = prompt("Please enter an address for the Delivery")
\t var delivPhone = prompt("Please enter a phone number for the Delivery")
\t
\t var showDetails = document.getElementById('screen','pickUpDetails');
\t showDetails.innerHTML = '';
\t document.getElementById("yourDetails").innerHTML = "<u><b>Your Delivery Details: </b></u>";
\t document.getElementById("delivName").innerHTML = 'Your Name ' + delivName,
\t document.getElementById("delivAddress").innerHTML = 'Your Address ' + delivAddress,
\t document.getElementById("delivPhone").innerHTML = 'Your Number ' + delivPhone;
\t confirm.setAttribute("onClick", "end()"); \t //change the confirm button to the end() function
\t }
\t else { \t \t //get name for a pick up
\t var pickUpName = prompt("Please enter a name for the Pick-Up")
\t var showOrder = document.getElementById('screen','delivDetails');
\t showOrder.innerHTML = '';
\t document.getElementById("pickUpDetailsTitle").innerHTML = "<u><b>Your Details: </b></u>",
\t document.getElementById("pickUpName").innerHTML = 'Your Name ' + pickUpName;
confirm.setAttribute("onClick", "end()"); \t //change the confirm button to the end() function
\t }
}
function end() { \t //function to tell the customer that their order has been placed,
\t alert("Your order had been placed.") \t \t //and reload ready for the next order
\t window.location.reload()
\t return;
}
</script>
<div id= "screen">
<body>
<div>
<h1> Welcome to Pete's Pizzas Ordering Program </h1>
<p>Enter the pizzas you would like to order</p>
<form name ="form"> \t \t <!-- form to allow text entry to set values of ordering Standard Pizzas -->
<p>Standard Pizzas:</p>
<input type="number" name= "hawaiian" > Hawaiian Pizza<br>
<input type="number" name= "cheese" > Cheese Pizza<br>
<input type="number" name= "veggie" > Veggie Pizza<br>
<input type="number" name= "supreme" > Supreme Pizza<br>
<input type="number" name= "pepperoni" > Pepperoni Pizza<br>
<form name ="form"> \t \t <!-- form to allow text entry to set values of ordering Gourmet Pizzas -->
<p>Gourmet Pizzas:</p>
<input type="number" name= "meatlovers" > Meat Lovers Pizza<br>
<input type="number" name= "chicken" > Chicken Pizza<br>
<input type="number" name= "prawn" > Prawn Pizza<br>
<br>
<input type="checkbox" id= "delivOption">
<label for = "delivOption">Is the order a delivery?</label><br>
<br>
<input type="button" value="Order Now" onClick="order()"> \t <!-- button which triggers the ordering function -->
<input type="button" value="Cancel Order" onClick="window.location.reload()" > <!-- button to cancel the order -->
</div>
</form>
<br> Standard Pizza Cost $9.95<br>
<br> Gourmet Pizza Cost $15.95 </br>
<i> (Note : Maximum 12 Pizzas per Order) </i>
</div>
<div id="order"> \t <!-- division to list all the pizzas ordered -->
<p id= "yourOrder"></p>
\t <p id= "stanPizzaTitle"></p>
\t <p id= "hawaiianList"></p>
\t <p id= "cheeseList"></p>
\t <p id= "veggieList"></p>
\t <p id= "supremeList"></p>
\t <p id= "pepperoniList"></p>
\t <p id= "gourPizzaTitle"></p>
\t <p id= "meatloversList"></p>
\t <p id= "chickenList"></p>
\t <p id= "prawnList"></p>
</div>
<div id="delivDetails"> \t <!-- division to list all the info for delivery -->
\t <p id= "yourDetails"></p>
\t <p id= "delivName"></p>
\t <p id= "delivAddress"></p>
\t <p id= "delivPhone"></p>
</div>
<div id="pickUpDetails"> \t <!-- division to list all the info for pick-up -->
\t <p id= "pickUpDetailsTitle"></p>
\t <p id= "pickUpName"></p>
</div>
</body>
</html>
這裏有很多的語法錯誤 – CaptainHere
可能我沒有做過那麼多的JavaScript和HTML之前 –