Question

我真的需要一些帮助来创建此订单列表。当你点击按钮时，它会将addToList中的文本添加到div中，以便它显示在页面上。它应该在javascript中添加数据（名称，价格）。但无法让它正常工作。

<html>
 <body>
    <div id="myList">

    </div>

    <button onclick="addToList('donut', '25,-')">add</button>
 </body>
</html>




    <style>
    #myList {
        border: 1px solid black;
        margin-bottom: 10px;
    }
    </style>





    <script>
    function displayListCart() {
        var myList = document.getElementById("myList");
    };



    function addToList(name,price) {
      var itemOrder = {};
      //itemOrder with data
      itemOrder.Name=name;
      itemOrder.Price=price;
      //Add newly created product to our shopping cart 
      listCart.push(itemOrder);
      displayListCart();
    }
    </script>

Answer 1

这是Fiddle Demo。

我不喜欢内联调用JavaScript函数，因为它违反了关注点的分离，所以我改变了事件绑定的方式。这不是你问题的一部分，但我正在使用这种方法：

<强> HTML：

<div id="myList">
</div>

<button id="btn" data-name="donut" data-price="25,-">add</button>

注意：

我在按钮上添加了值作为数据属性。那你可以从JavaScript访问它们。

<强> JavaScript的：

 function displayListCart(listCart) {
   var myList = document.getElementById("myList");
   for (i = 0; i < listCart.length; i++) {
     myList.innerHTML = myList.innerHTML + listCart[i].Name + " : " + listCart[i].Price;
   }
 };


 function addToList(name, price) {
   var itemOrder = {};
   //itemOrder with data
   itemOrder.Name = name;
   //debugging -- check to make sure this returns what you expect
   console.log(itemOrder.Name);
   itemOrder.Price = price;
   //debugging -- check to make sure this returns what you expect
   console.log(itemOrder.Price);
   //Add newly created product to our shopping cart 
  //declare listCart before you use it
   var listCart = [];
   listCart.push(itemOrder);
   //pass listCart to the display function
   displayListCart(listCart);
 }

 function getValues() {
   addToList(myBtn.getAttribute('data-name'), myBtn.getAttribute('data-price'));
 }
 var myBtn = document.getElementById("btn");

 myBtn.addEventListener("click", getValues, false);

备注：

在向对象添加对象之前，需要声明listCart。

我怀疑您打算将listCart传递给显示功能，以便您可以访问其中的对象以供显示。

您错过了将值添加到div的逻辑。您需要迭代数组并访问对象属性。

Answer 2

首先，如果您打开开发工具，您将看到错误 - Uncaught ReferenceError: listCart is not defined。因此，您需要做的第一件事是创建listCart数组，如下所示：var listCart = [];

然后你应该修改你的displayListCart功能，为listCart中的每个项目显示一个新的div，如下所示：

function displayListCart() {
   var myList = document.getElementById("myList"),
       myListContent = "";
   listCart.forEach(function(cart) {
      myListContent += "<div>" + cart.Name + ": " + cart.Price + "<div>";            
   });
   myList.innerHTML = myListContent;
};

The code example

按钮单击，将一些文本和数字添加到div。不行

2 个答案: