我正在尝试创建一个“客户”对象，该对象将存储所有这些数据，然后将该信息显示为“客户订单”，并列出所有新信息。 当我单击按钮时，它不会显示输出。输出出现一秒钟，然后消失。 我猜我的对象数组有问题，但不确定。
这就是我要使用JavaScript的功能。
fd/*index.js*/
var objectarray = [];
var button = document.getElementById("clickMe");
function addToArray() {
var customerobject = {};
customerobject.name = document.getElementById("nameid").value;
customerobject.address = document.getElementById("addressid").value;
customerobject.phone = document.getElementById("phoneid").value;
objectarray.push(customerobject);
console.log(objectarray);
}
button.addEventListener("click", addToArray);
function clicked()
{
//code to get an output from the customer (ordered menu information)
}
答案 0 :(得分：0)
请注意，提交表单时，它将刷新页面。通过使用.preventDefault（）函数提交表单时，您需要阻止默认操作。将在下面更新您的代码以演示并添加一些注释。
/*index.js*/
var objectarray = [];
var button = document.getElementById("clickMe");
// add the event to the function
button.addEventListener("click", function(event){
event.preventDefault(); // Add this line
var customerobject = {};
customerobject.name = document.getElementById("nameid").value;
customerobject.address = document.getElementById("addressid").value;
customerobject.phone = document.getElementById("phoneid").value;
objectarray.push(customerobject);
console.log(objectarray);
});
function clicked()
{
//code to get an output from the customer (ordered menu information)
}<!DOCTYPE html>
<html>
<head>
<title>City Delicatssen</title>
<link href="PartA.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="PartA.js">
</script>
</head>
<body>
<!--this is for date-->
<h1>Today is : <span id="datefield" ></span></h1>
<br>
<br>
<div id="background">
<br>
<h1>Welcome to City Delicatessen </h1>
<div id="contents">
<table cellpadding="5" class="formtable">
<br>
<form name="information">
<table>
<tr><td> First and Last Name :</td><td><input type="name" id="nameid" size="25" maxlength="25" autofocus="yes" pattern="[a-zA-Z -]+$"></td></tr>
<tr><td> Address :</td><td><input type="address" id="addressid" size="25" maxlength="25" pattern="[a-zA-Z0-9]| |/|,|.|\|@|#|$|%|&)+"></td></tr>
<tr><td>Phone Number :</td><td><input type="tel" size="25" id="phoneid" placeholder="XXX XXX XXXX" pattern="\d{3} \d{3} \d{4}"></td></tr>
</form>
<br>
<br>
<form name=order>
<table style="width:100%">
<tr valign=top>
<td>
<h3>Choose Type of Pizza</h3>
<img src="cheesepizza.jpg" alt="Forest">
<input type=radio name=pizzatype value="Super Cheesy"checked>Super Cheesy<br>
<img src="meatpizza.jpg" alt="Forest">
<input type=radio name=pizzatype value="Extra Meaty">Extra Meaty<br>
<img src="veggypizza.jpg" alt="Forest">
<input type=radio name=pizzatype value="Really Veggy">Really Veggy<br>
</td>
<tr>
<td><div id="border_div">
<h3>Choose Size of Pizza</h3>
<input type=radio name=specialty value="Small:8.50" checked>Small<br>
<input type=radio name=specialty value="Medium:11.50">Medium<br>
<input type=radio name=specialty value="Large:14.00">Large<br>
<input type=radio name=specialty value="Extra Large:16.50">Extra Large<br>
</div>
</td>
<br>
<table>
<td>
<h3>Choose Type of Soda</h3>
<input type=radio name=sodatype value="Cola" checked>Cola<br>
<input type=radio name=sodatype value="Orange">Orange<br>
<input type=radio name=sodatype value="Lemon">Lemon<br>
<input type=radio name=sodatype value="Root Beer">Root Beer<br>
</table>
</td>
</tr>
<table style="width:100%">
<tr valign=top>
<td><div id="border_div">
<h3>Choose Type of Sandwich</h3>
<img src="garden.jpg" alt="">
<input type=radio name=sandwichtype value="All Garden Vegetarian:7.50" checked>All Garden Vegetarian<br>
<img src="beef.jpg" alt="">
<input type=radio name=sandwichtype value="Big Beef on a Bun:8.50">Big Beef on a Bun<br>
<img src="mixedgrill.jpg" alt="">
<input type=radio name=sandwichtype value="Mixed Grill:9.50">Mixed Grill<br>
<img src="grilledpork.jpg" alt="">
<input type=radio name=sandwichtype value="Grilled Pork:9.5">Grilled Pork<br>
</td>
</table>
<td></td>
<td><div id="border_div">
<h3>Choose Size of Soda</h3>
<input type=radio name=sodaspecialty value="Small:1.25" checked>Small<br>
<input type=radio name=sodaspecialty value="Medium:1.75">Medium<br>
<input type=radio name=sodaspecialty value="Large:2.00">Large<br>
</div>
</td>
</tr>
<tr>
<td><h3>Choose Toppings</h3>
<input type=checkbox name=extracheese checked value=1.75>Extra Cheese<br>
<input type=checkbox name=pepperoni value=1.75>Pepperoni<br>
<input type=checkbox name=mushroom value=1.75>Mushroom<br>
<input type=checkbox name=bacon value=1.75>Bacon<br>
<input type=checkbox name=olives value=1.75>Olives<br>
</td>
</div>
<td></td>
<td></td>
</tr>
<tr>
<td><br>Quantity of Pizza<input type="number" size="3" id="quantity" min="0"></td>
<br>
<td><br>Quantity of Sandwich<input type="number" size="3" id="sandwichquantity" min="0"></td>
<br>
<td><br>Quantity of Drink<input type="number" size="3" id="sodaquantity" min="0"></td>
<br>
</tr>
</table>
</div>
<center><button id="clickMe" value="Price your Order" onClick="clicked()">click me</button></center>
</form>
</body>
</html>
希望这会有所帮助：）
答案 1 :(得分：0)
实际上，夏娃，您只需要将type="button"添加到button标签。
这是因为默认情况下，按钮元素为type="submit"。因为它是您正在使用的表单，并且该按钮位于表单中，所以单击该按钮时，它会明确提交它。由于表单没有显式的动作属性，因此它将自身提交给当前页面URL，从而刷新页面。
没有指定类型的按钮会将表单提交为默认操作。
因此，要做此工作所需要做的唯一更改就是将type = "button"添加到按钮标记中。
如果您需要在html页面中显示此customerobject对象，只需使用div创建一个innerHTML分配对象的值。
此外，作为奖励：您的结束标记不太正确。我已经修复了它们，并在下面进行了更新。
/*index.js*/
var objectarray = [];
var button = document.getElementById("clickMe");
var customerobject = {};
function addToArray() {
customerobject.name = document.getElementById("nameid").value;
customerobject.address = document.getElementById("addressid").value;
customerobject.phone = document.getElementById("phoneid").value;
objectarray.push(customerobject);
console.log(objectarray);
document.getElementById("orderInfo").innerHTML = JSON.stringify(customerobject);
}
function clicked()
{
//code to get an output from the customer (ordered menu information)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>City Delicatssen</title>
<link href="PartA.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="PartA.js">
</script>
</head>
<body>
<!--this is for date-->
<h1>Today is : <span id="datefield"></span></h1>
<br>
<br>
<div id="background">
<br>
<h1>Welcome to City Delicatessen </h1>
<div id="contents">
<table cellpadding="5" class="formtable">
<br>
<form name="information">
<table>
<tr>
<td> First and Last Name :</td>
<td><input type="name" id="nameid" size="25" maxlength="25" autofocus="yes" pattern="[a-zA-Z -]+$"></td>
</tr>
<tr>
<td> Address :</td>
<td><input type="address" id="addressid" size="25" maxlength="25" pattern="[a-zA-Z0-9]| |/|,|.|\|@|#|$|%|&)+"></td>
</tr>
<tr>
<td>Phone Number :</td>
<td><input type="tel" size="25" id="phoneid" placeholder="XXX XXX XXXX" pattern="\d{3} \d{3} \d{4}"></td>
</tr>
</table>
</form>
<br>
<br>
<form name=order>
<table style="width:100%">
<tr valign=top>
<td>
<h3>Choose Type of Pizza</h3>
<img src="cheesepizza.jpg" alt="Forest">
<input type=radio name=pizzatype value="Super Cheesy" checked>Super Cheesy<br>
<img src="meatpizza.jpg" alt="Forest">
<input type=radio name=pizzatype value="Extra Meaty">Extra Meaty<br>
<img src="veggypizza.jpg" alt="Forest">
<input type=radio name=pizzatype value="Really Veggy">Really Veggy<br>
</td>
<tr>
<td>
<div id="border_div">
<h3>Choose Size of Pizza</h3>
<input type=radio name=specialty value="Small:8.50" checked>Small<br>
<input type=radio name=specialty value="Medium:11.50">Medium<br>
<input type=radio name=specialty value="Large:14.00">Large<br>
<input type=radio name=specialty value="Extra Large:16.50">Extra Large<br>
</div>
</td>
<br>
<table>
<tr>
<td>
<h3>Choose Type of Soda</h3>
<input type=radio name=sodatype value="Cola" checked>Cola<br>
<input type=radio name=sodatype value="Orange">Orange<br>
<input type=radio name=sodatype value="Lemon">Lemon<br>
<input type=radio name=sodatype value="Root Beer">Root Beer<br>
</td>
</tr>
</table>
<table style="width:100%">
<tr valign=top>
<td>
<div id="border_div">
<h3>Choose Type of Sandwich</h3>
<img src="garden.jpg" alt="">
<input type=radio name=sandwichtype value="All Garden Vegetarian:7.50" checked>All Garden Vegetarian<br>
<img src="beef.jpg" alt="">
<input type=radio name=sandwichtype value="Big Beef on a Bun:8.50">Big Beef on a Bun<br>
<img src="mixedgrill.jpg" alt="">
<input type=radio name=sandwichtype value="Mixed Grill:9.50">Mixed Grill<br>
<img src="grilledpork.jpg" alt="">
<input type=radio name=sandwichtype value="Grilled Pork:9.5">Grilled Pork<br>
</div>
</td>
</tr>
</table>
<td></td>
<td>
<div id="border_div">
<h3>Choose Size of Soda</h3>
<input type=radio name=sodaspecialty value="Small:1.25" checked>Small<br>
<input type=radio name=sodaspecialty value="Medium:1.75">Medium<br>
<input type=radio name=sodaspecialty value="Large:2.00">Large<br>
</div>
</td>
</tr>
<tr>
<td>
<h3>Choose Toppings</h3>
<input type=checkbox name=extracheese checked value=1.75>Extra Cheese<br>
<input type=checkbox name=pepperoni value=1.75>Pepperoni<br>
<input type=checkbox name=mushroom value=1.75>Mushroom<br>
<input type=checkbox name=bacon value=1.75>Bacon<br>
<input type=checkbox name=olives value=1.75>Olives<br>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td><br>Quantity of Pizza<input type="number" size="3" id="quantity" min="0"></td>
<br>
<td><br>Quantity of Sandwich<input type="number" size="3" id="sandwichquantity" min="0"></td>
<br>
<td><br>Quantity of Drink<input type="number" size="3" id="sodaquantity" min="0"></td>
<br>
</tr>
</table>
<center><button type="button" id="clickMe" value="Price your Order" onClick="addToArray()">click me</button></center>
</form>
<!-- Add the below div section to print the details on your webpage-->
<div id="orderInfo">
</div>
</table>
</div>
</div>
</body>
</html>
答案 2 :(得分：0)
在您的clickMe按钮中添加
type =“ button”
属性：
<center><button id="clickMe" type="button" value="Price your Order" onClick = "clicked()">click me</button></center>