Javascript 单击按钮，向div添加一些文本和数字。不'；行不通_Javascript_List_Css

Javascript 单击按钮，向div添加一些文本和数字。不'；行不通

javascript list css

Javascript 单击按钮，向div添加一些文本和数字。不'；行不通,javascript,list,css,Javascript,List,Css,我真的需要一些帮助来创建这个订单列表。当你点击按钮时，它会将addToList中的文本添加到div中，这样它就会显示在页面上。它应该用javascript添加数据（名称、价格）。但是不能让它正常工作 <html> <body> <div id="myList"> </div> <button onclick="addToList('donut', '25,-')">add</button>

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


添加
#迈利斯特{
边框：1px纯黑；
边缘底部：10px；
}
函数displayListCart（）{
var myList=document.getElementById（“myList”）；
};
功能添加列表（名称、价格）{
var itemOrder={}；
//带数据的itemOrder
itemOrder.Name=名称；
itemOrder.Price=价格；
//将新创建的产品添加到我们的购物车
listCart.push（itemOrder）；
displayListCart（）；
}

首先，如果打开开发工具，您将看到一个错误-

未捕获引用错误：未定义listCart

。因此，您需要做的第一件事是创建

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

函数displayListCart（）{
var myList=document.getElementById（“myList”），
myListContent=“”；
forEach（函数（购物车）{
myListContent+=“”+cart.Name+：“+cart.Price+”；
});
myList.innerHTML=myListContent；
};

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

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

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

 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);


添加

注:

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


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

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

 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）{
var myList=document.getElementById（“myList”）；
对于（i=0；i

注意事项：
<div id="myList">
</div>

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

 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
我怀疑您打算将listCart传递给display函数，以便访问其中的对象进行显示
您缺少将值添加到div的逻辑。您需要迭代数组并访问对象属性
您是否在JavaScript的每一行上都尝试了console.log（），以验证该行是否返回了您期望的结果？非常感谢您的帮助。我学到了一些新的东西，下次会记得的。谢谢你的帮助。我对js还是新手，所以有很多东西要学。