javascript - 使用 InnerHTML 显示数组

标签 javascript html

我是一名学生，一直在为学校使用 javascript 和 html 开发披萨订购程序。我从带有 document.form.item.value 的数组中获取有关订单的所有信息，来自 input type="number"name= "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>

最佳答案

修改代码如下:

在 order() 函数中，您设置项目上的所有innerHTML，执行以下操作:

document.getElementById("hawaiianList").innerHTML = stanPizza[0] > 0 ? '夏威夷 x ' + stanPizza[0] : ""

对每个人都这样做。它是一个条件，因此仅当订单号大于 0 时才会显示订单文本。

关于javascript - 使用 InnerHTML 显示数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42820428/

上一篇：javascript - 谷歌分析事件跟踪点击没有响应

下一篇：javascript - 如何使用toDataURL设置为PNG8？

相关文章：

javascript - 在Canvas中实现拉伸(stretch)橡皮筋效果

javascript - JS函数不响应事件onclick

javascript - Sencha Touch 2 + PhoneGap + iPad : Video with base64 encoded data: "The Operation could not be completed"

html - 按钮不适用于 .pull-left (Bootstrap)

javascript - 如何从文件中导出字符串并在 NODE.js 中的另一个文件上 require() 导出的字符串？

javascript - 哪些视频播放器不需要文件格式转换？

javascript - Angular 2 : Prevent router from adding to history

html - 将视频嵌入html导致操作被取消

css - 在 HTML/CSS 中很难使用图像分隔符

html - 如何使用 BeautifulSoup/lxml 将子 DOM 节点合并/折叠到父节点中？

©2024 IT工具网  联系我们