I am a newbie and I've been wrecking my brain trying to figure out the solution by trying different ways to get the proper results but nothing that I tried so far has worked. I've also tried searching here on * and on google. But none of the solutions that were commented so far, solved the issue.
我是一个新手,我一直在破坏我的大脑,试图通过尝试不同的方法来找到解决方案,但到目前为止我没有尝试过任何工作。我也尝试过在*和google上搜索。但到目前为止评论的解决方案都没有解决问题。
Here's a link to my codes so far: http://pastebin.com/x05nGQ1Y
这是到目前为止我的代码的链接:http://pastebin.com/x05nGQ1Y
What I am trying to achieve is the following: on the input field I can write for an example a product like banana(s) and an apple(s) etc. Then next to it, I have a drop down list which represents the quantity of the specific product that I want. Then at the end I have a onclick button that will show what I have ordered in the form of a ul list. I also have a button with the function of deleting the current list, if I have misspelled something or have set the wrong quantity for a product.
我想要实现的目标如下:在输入字段中,我可以为一个例子写一个像香蕉和苹果等产品。然后在它旁边,我有一个代表数量的下拉列表我想要的具体产品。然后在最后我有一个onclick按钮,它将以ul列表的形式显示我所订购的内容。我还有一个按钮,具有删除当前列表的功能,如果我拼写错误或为产品设置了错误的数量。
Now here comes the part that I am not able to solve: I am trying to get an input to show the total quantities of all products at the end.
现在这里是我无法解决的部分:我正在尝试获取输入以显示最终所有产品的总数量。
Say I type in banana with the amount of 5 from the drop down list, then I add apples with the amount of 3 and 1 gallon of milk. This means 5 + 3 + 1 = 9 in total products, which I am trying to get to pop up as a result at the end.
假设我从下拉列表中输入5个香蕉,然后加入3加仑和1加仑牛奶。这意味着5 + 3 + 1 = 9总产品,我试图在最后弹出结果。
2 个解决方案
#1
0
In your onclick handler, you need to add code to total up the items in your list. You haven't provided any information here about how you are storing that data so I am going to assume you only have that data stored in a UL on the page. In this case, you just need to count the LI elements in your UL and output the result.
在您的onclick处理程序中,您需要添加代码以累计列表中的项目。您没有在此处提供有关如何存储数据的任何信息,因此我假设您只将该数据存储在页面上的UL中。在这种情况下,您只需要计算UL中的LI元素并输出结果。
It would be easier to help you if you posted your code and a codepen so others could view and modify your code.
如果您发布了代码和codepen以便其他人可以查看和修改您的代码,那么帮助您会更容易。
EDIT: I see you provided a link. Here is what I think. You are storing your data points as LI on the page, instead you should store it in an array of data objects and render the UL from your data array. Then, you can easily grab the appropriate data points for your calculation. It is good practice to avoid storing data in the DOM and instead to store it in a separate data structure in the javascript.
编辑:我看到你提供了一个链接。这就是我的想法。您将数据点存储为页面上的LI,而应将其存储在数据对象数组中,并从数据数组中呈现UL。然后,您可以轻松获取适合您计算的数据点。最好避免在DOM中存储数据,而是将其存储在javascript中的单独数据结构中。
For your case, you can keep a counter variable to track of the number of items in the list, and then reset it when the list is cleared.
对于您的情况,您可以保留计数器变量以跟踪列表中的项目数,然后在清除列表时重置它。
#2
0
All you have to do is..
你所要做的就是......
1) Create an input box to display the total
1)创建一个输入框以显示总数
<input id="total" value="0" />
2) Update the box whenever someone adds an item - Put this is your leggTil function somewhere after antall is defined.
2)每当有人添加一个项目时更新该框 - 在定义antall之后将这个是你的leggTil函数。
document.getElementById('total').value = parseInt(document.getElementById('total').value) + parseInt(antall);
This just adds the current item's quantity to the value already in the box.
这只是将当前项目的数量添加到框中已有的值。
Here's a working demo: https://jsfiddle.net/oh376pLw/
这是一个有效的演示:https://jsfiddle.net/oh376pLw/
Also, not related to your question, but your really shouldn't put <header> tags in the <head> of the document. You also shouldn't put anything between the <head> and the <body> of the document.
此外,与您的问题无关,但您真的不应该将
#1
0
In your onclick handler, you need to add code to total up the items in your list. You haven't provided any information here about how you are storing that data so I am going to assume you only have that data stored in a UL on the page. In this case, you just need to count the LI elements in your UL and output the result.
在您的onclick处理程序中,您需要添加代码以累计列表中的项目。您没有在此处提供有关如何存储数据的任何信息,因此我假设您只将该数据存储在页面上的UL中。在这种情况下,您只需要计算UL中的LI元素并输出结果。
It would be easier to help you if you posted your code and a codepen so others could view and modify your code.
如果您发布了代码和codepen以便其他人可以查看和修改您的代码,那么帮助您会更容易。
EDIT: I see you provided a link. Here is what I think. You are storing your data points as LI on the page, instead you should store it in an array of data objects and render the UL from your data array. Then, you can easily grab the appropriate data points for your calculation. It is good practice to avoid storing data in the DOM and instead to store it in a separate data structure in the javascript.
编辑:我看到你提供了一个链接。这就是我的想法。您将数据点存储为页面上的LI,而应将其存储在数据对象数组中,并从数据数组中呈现UL。然后,您可以轻松获取适合您计算的数据点。最好避免在DOM中存储数据,而是将其存储在javascript中的单独数据结构中。
For your case, you can keep a counter variable to track of the number of items in the list, and then reset it when the list is cleared.
对于您的情况,您可以保留计数器变量以跟踪列表中的项目数,然后在清除列表时重置它。
#2
0
All you have to do is..
你所要做的就是......
1) Create an input box to display the total
1)创建一个输入框以显示总数
<input id="total" value="0" />
2) Update the box whenever someone adds an item - Put this is your leggTil function somewhere after antall is defined.
2)每当有人添加一个项目时更新该框 - 在定义antall之后将这个是你的leggTil函数。
document.getElementById('total').value = parseInt(document.getElementById('total').value) + parseInt(antall);
This just adds the current item's quantity to the value already in the box.
这只是将当前项目的数量添加到框中已有的值。
Here's a working demo: https://jsfiddle.net/oh376pLw/
这是一个有效的演示:https://jsfiddle.net/oh376pLw/
Also, not related to your question, but your really shouldn't put <header> tags in the <head> of the document. You also shouldn't put anything between the <head> and the <body> of the document.
此外,与您的问题无关,但您真的不应该将