时间戳

首页 > 解决方案 > javascript创建对象来存储数据和列表信息

javascript - javascript创建对象来存储数据和列表信息

问题描述

我正在尝试创建一个“客户”对象，该对象将存储所有这些数据，然后将信息显示为“客户订单”并列出所有新信息。当我单击按钮时，它不显示输出。输出出现一秒钟然后消失。我猜我的对象数组有问题，但不确定。

这就是我的 javascript 所拥有的。

/*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) 
			

}
	
<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>
</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>

标签： javascript

解决方案

请注意，当您提交表单时，它将刷新页面。当使用 .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>

希望这会有所帮助:)

推荐阅读