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

时间：2019-03-22 03:18:12

标签： javascript

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

这就是我要使用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) 
			

}

3 个答案:

答案 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>

相关问题
最新问题