单击按钮，将一些文本和数字添加到div中。 不起作用
[英]button click, adds some text and number to a div. Doesn't work
问题描述
I really need some help to create this order list. 
我真的需要一些帮助来创建此订单列表。 It's the mening that, when you click on the button it adds the text inside the addToList, to the div, so it shows up on the page. 值得一提的是，当您单击按钮时，它将addToList内的文本添加到div中，因此它显示在页面上。 It should add the data (name, price), in javascript. 它应该在javascript中添加数据（名称，价格）。 But can't get it to work properly. 但是无法使其正常工作。
<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>
2 个解决方案
解决方案1
0 已采纳 2016-06-24 15:15:40
Here is a Fiddle Demo . 这是一个小提琴演示 。
I'm not a fan of inline calls to JavaScript functions because it violates separation of concerns, so I've changed the way the event is bound. 我不喜欢JavaScript函数的内联调用，因为它违反了关注点分离，因此我更改了事件绑定的方式。 This isn't part of your problem, but I'm using this approach: 这不是您的问题的一部分，但是我正在使用这种方法：
HTML: HTML：
<div id="myList">
</div>
<button id="btn" data-name="donut" data-price="25,-">add</button>
Note: 注意：
- I've added the values as data attributes on the button. 我已经将值添加为按钮上的数据属性。 You can then access them from JavaScript. 然后，您可以从JavaScript访问它们。
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);
Notes: 笔记：
- You need to declare listCart before you add objects to it. 您需要在添加对象之前声明listCart。
- I suspect you intended to pass listCart to the display function so that you can access the objects within it for display. 我怀疑您打算将listCart传递给显示功能，以便可以访问其中的对象进行显示。
- You were missing the logic that adds the values to the div. 您缺少将值添加到div的逻辑。 You need to iterate over the array and access the object properties. 您需要遍历数组并访问对象属性。
解决方案2
-1 2016-06-24 14:57:19
First of all, if you open the Dev Tools, you will see an error - Uncaught ReferenceError: listCart is not defined . 首先，如果打开开发工具，您将看到一个错误Uncaught ReferenceError: listCart is not defined 。 So the first thing you need to do is create listCart array, like this : var listCart = []; 因此，您需要做的第一件事就是创建listCart数组，如下所示： var listCart = [];
Then you should modify your displayListCart function, to display a new div for every item in listCart , like this: 那么你应该修改你的displayListCart功能，以显示在每一个项目一个新的div listCart ，就像这样：
function displayListCart() {
var myList = document.getElementById("myList"),
myListContent = "";
listCart.forEach(function(cart) {
myListContent += "<div>" + cart.Name + ": " + cart.Price + "<div>";
});
myList.innerHTML = myListContent;
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.