我是一名学生，我一直在用javascript和html为学校做披萨订购计划。我从 document.form.item.value 的数组中获取有关订单的所有信息，输入类型=＆＃34;数字＆＃34; name =＆＃34; item ＆＃34; ＆GT; item 比萨饼。然后我想显示订单。目前我正在使用此代码：
var showOrder = document.getElementById('screen');
showOrder.innerHTML = '';
document.getElementById("yourOrder").innerHTML = "<u><b>Your Order: </b></u>";
document.getElementById("stanPizzaTitle").innerHTML = '<u><b>Standard - $9.95:</b></u>'
document.getElementById("hawaiianList").innerHTML = 'Hawaiian x ' + stanPizza[0],
document.getElementById("cheeseList").innerHTML = 'Cheese x ' + stanPizza[1],
document.getElementById("veggieList").innerHTML = 'Veggie x ' + stanPizza[2],
document.getElementById("supremeList").innerHTML = 'Supreme x ' + stanPizza[3],
document.getElementById("pepperoniList").innerHTML = 'Pepperoni x ' + stanPizza[4],
document.getElementById("gourPizzaTitle").innerHTML = '<u><b>Gourmet: - $15.95</b></u>'
document.getElementById("meatloversList").innerHTML = 'Meat Lovers x ' + gourPizza[0],
document.getElementById("chickenList").innerHTML = 'Chicken x ' + gourPizza[1],
document.getElementById("prawnList").innerHTML = 'Prawn x ' + gourPizza[2];
然后用：
显示它
<div id="order"> <!-- division to list all the pizzas ordered -->
<p id= "yourOrder"></p>
<p id= "stanPizzaTitle"></p>
<p id= "hawaiianList"></p>
<p id= "cheeseList"></p>
<p id= "veggieList"></p>
<p id= "supremeList"></p>
<p id= "pepperoniList"></p>
<p id= "gourPizzaTitle"></p>
<p id= "meatloversList"></p>
<p id= "chickenList"></p>
<p id= "prawnList"></p>
</div>
然而，这意味着当我想显示订单时，它会显示您订购零件的物品，就像您订购0个鸡肉披萨一样，它会不必要地告诉您0个鸡肉比萨饼。有没有什么方法可以让这些有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; // for cost of the standard Pizzas
const gourPizzaCost = 15.50; // for cost of the gourmet Pizzas+
const delivCharge = 5; // for cost of delivery
var stanPizzaTotal = 0;
var gourPizzaTotal = 0;
function delivery() {
delivOption = document.getElementById("delivOption").checked //is the order a delivery or not variable
return;
}
function order() { //the function that controls all the information about the pizzas
delivery()
var stanPizza =
[
document.form.hawaiian.value, // allocating standard pizza types in array and converting to a number
document.form.cheese.value,
document.form.veggie.value,
document.form.supreme.value,
document.form.pepperoni.value;
]
for( i = 0, stanPizzaTotal = 0; i < stanPizza.length; i++) // calculate the total number of standard pizzas
stanPizzaTotal += stanPizza[i]
var gourPizza =
[
document.form.meatlovers.value, // allocating gourmet pizza types in array and converting to a number
document.form.chicken.value,
document.form.prawn.value;
]
for( i = 0, gourPizzaTotal = 0; i < gourPizza.length; i++) // calculate the total number of gourmet pizzas
gourPizzaTotal += gourPizza[i]
var pizzaTotal = stanPizzaTotal + gourPizzaTotal //calculate the total number of pizzas
if(pizzaTotal > 12) { //checking that they don't order over 12 pizzas
alert("Sorry but you can only order 12 pizzas, not " + pizzaTotal + "\n(The Page will reload)")
window.location.reload()
return;
}else {
var showOrder = document.getElementById('screen'); //changing the display to show the order
showOrder.innerHTML = '';
document.getElementById("yourOrder").innerHTML = "<u><b>Your Order: </b></u>";
document.getElementById("stanPizzaTitle").innerHTML = '<u><b>Standard - $9.95:</b></u>'
document.getElementById("hawaiianList").innerHTML = 'Hawaiian x ' + stanPizza[0],
document.getElementById("cheeseList").innerHTML = 'Cheese x ' + stanPizza[1],
document.getElementById("veggieList").innerHTML = 'Veggie x ' + stanPizza[2],
document.getElementById("supremeList").innerHTML = 'Supreme x ' + stanPizza[3],
document.getElementById("pepperoniList").innerHTML = 'Pepperoni x ' + stanPizza[4],
document.getElementById("gourPizzaTitle").innerHTML = '<u><b>Gourmet: - $15.95</b></u>'
document.getElementById("meatloversList").innerHTML = 'Meat Lovers x ' + gourPizza[0],
document.getElementById("chickenList").innerHTML = 'Chicken x ' + gourPizza[1],
document.getElementById("prawnList").innerHTML = 'Prawn x ' + gourPizza[2];
confirm = document.createElement("INPUT"); //button input elements for confirming or canceling the order
confirm.setAttribute("type", "button");
confirm.setAttribute("value", "Confirm Order");
confirm.setAttribute("onClick", "calculate()");
document.body.append(confirm);
clear = document.createElement("INPUT");
clear.setAttribute("type", "button");
clear.setAttribute("value", "Cancel Order");
clear.setAttribute("onClick", "window.location.reload()");
document.body.append(clear);
}
}
function calculate() { // Function to calculate the total cost for the order
// adding cost for delivery if checked
if (delivOption == true) {
var delivery = 1
details()
} else {
var delivery = 0
details()
}
var totalPrice = (stanPizzaTotal * stanPizzaCost) + , //calculate the total price
(gourPizzaTotal * gourPizzaCost) + ,
(delivery * delivCharge);
}
function details() { //function to collect all the details of the customer
if (delivOption == true) { //get info for name, phone and address for delivery
var delivName = prompt("Please enter a name for the Delivery")
var delivAddress = prompt("Please enter an address for the Delivery")
var delivPhone = prompt("Please enter a phone number for the Delivery")
var showDetails = document.getElementById('screen','pickUpDetails');
showDetails.innerHTML = '';
document.getElementById("yourDetails").innerHTML = "<u><b>Your Delivery Details: </b></u>";
document.getElementById("delivName").innerHTML = 'Your Name ' + delivName,
document.getElementById("delivAddress").innerHTML = 'Your Address ' + delivAddress,
document.getElementById("delivPhone").innerHTML = 'Your Number ' + delivPhone;
confirm.setAttribute("onClick", "end()"); //change the confirm button to the end() function
}
else { //get name for a pick up
var pickUpName = prompt("Please enter a name for the Pick-Up")
var showOrder = document.getElementById('screen','delivDetails');
showOrder.innerHTML = '';
document.getElementById("pickUpDetailsTitle").innerHTML = "<u><b>Your Details: </b></u>",
document.getElementById("pickUpName").innerHTML = 'Your Name ' + pickUpName;
confirm.setAttribute("onClick", "end()"); //change the confirm button to the end() function
}
}
function end() { //function to tell the customer that their order has been placed,
alert("Your order had been placed.") //and reload ready for the next order
window.location.reload()
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"> <!-- 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"> <!-- 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()"> <!-- 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"> <!-- division to list all the pizzas ordered -->
<p id= "yourOrder"></p>
<p id= "stanPizzaTitle"></p>
<p id= "hawaiianList"></p>
<p id= "cheeseList"></p>
<p id= "veggieList"></p>
<p id= "supremeList"></p>
<p id= "pepperoniList"></p>
<p id= "gourPizzaTitle"></p>
<p id= "meatloversList"></p>
<p id= "chickenList"></p>
<p id= "prawnList"></p>
</div>
<div id="delivDetails"> <!-- division to list all the info for delivery -->
<p id= "yourDetails"></p>
<p id= "delivName"></p>
<p id= "delivAddress"></p>
<p id= "delivPhone"></p>
</div>
<div id="pickUpDetails"> <!-- division to list all the info for pick-up -->
<p id= "pickUpDetailsTitle"></p>
<p id= "pickUpName"></p>
</div>
</body>
</html>
答案 0 :(得分：0)
按如下方式更改代码：
在order（）函数中，您在项目上设置所有innerHTML，执行以下操作：
document.getElementById("hawaiianList").innerHTML = stanPizza[0] > 0 ? 'Hawaiian x ' + stanPizza[0] : ""
为每个人做这件事。它是一个有条件的，所以如果订单号大于0，它只会显示订单的文本。