按钮单击，将一些文本和数字添加到 div。不工作答案

【问题标题】：button click, adds some text and number to a div. Doesn't work按钮单击，将一些文本和数字添加到 div。不工作
【发布时间】：2016-06-24 14:38:29
【问题描述】：

我真的需要一些帮助来创建这个订单列表。就是这样，当您单击按钮时，它会将 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>

【问题讨论】：

您是否在 JavaScript 的每一行都尝试过 console.log() 来验证该行是否返回了您期望的结果？

标签： javascript list css

【解决方案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 传递给 display 函数，以便您可以访问其中的对象进行显示。
您缺少将值添加到 div 的逻辑。您需要遍历数组并访问对象属性。

【讨论】：

非常感谢您的帮助。我学到了一些新东西，下次会记住的。

【解决方案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

【讨论】：

感谢您的帮助。我还是 js 新手，所以要学习的东西很多。