如何从下拉列表和输入框中获取附加值以显示?
How do I get the added value from a drop down list and an input box to show?
我是一个新手,我一直在绞尽脑汁试图通过尝试不同的方法来找出解决方案来获得正确的结果,但到目前为止我尝试过的任何方法都没有奏效。我也试过在 Whosebug 和 google 上搜索这里。但是到目前为止 none 的解决方案已经解决了问题。
这是我目前的代码 link:http://pastebin.com/x05nGQ1Y
我想要实现的是:
在输入字段上,我可以写一个例子,例如香蕉和苹果等产品。然后在它旁边,我有一个下拉列表,代表我想要的特定产品的数量。然后在最后我有一个 onclick 按钮,它将以 ul 列表的形式显示我订购的内容。如果我拼写错误或为产品设置了错误的数量,我还有一个具有删除当前列表功能的按钮。
现在是我无法解决的部分:我试图获得一个输入以在最后显示所有产品的总量。
假设我从下拉列表中输入数量为 5 的香蕉,然后我添加数量为 3 的苹果和 1 加仑牛奶。这意味着总共有 5 + 3 + 1 = 9 个产品,我试图在最后弹出结果。
在您的 onclick 处理程序中,您需要添加代码来汇总列表中的项目。您没有在此处提供任何有关如何存储该数据的信息,因此我假设您只将该数据存储在页面上的 UL 中。在这种情况下,你只需要计算你的 UL 中的 LI 元素并输出结果。
如果您发布您的代码和 codepen 以便其他人可以查看和修改您的代码,会更容易为您提供帮助。
编辑:我看到你提供了 link。这是我的想法。您将数据点存储为页面上的 LI,而应该将其存储在数据对象数组中并从数据数组中呈现 UL。然后,您可以轻松获取适合您计算的数据点。最好避免将数据存储在 DOM 中,而是将其存储在 javascript.
中的单独数据结构中
对于您的情况,您可以保留一个计数器变量来跟踪列表中的项目数,然后在清除列表时重置它。
你所要做的就是..
1) 创建一个输入框显示总数
<input id="total" value="0" />
2) 每当有人添加项目时更新框 - 将这是您的 leggTil
函数放在定义 antall
之后的某处。
document.getElementById('total').value = parseInt(document.getElementById('total').value) + parseInt(antall);
这只是将当前项目的数量添加到框中已有的值。
这是一个工作演示:https://jsfiddle.net/oh376pLw/
此外,与您的问题无关,但您确实不应该在文档的 <head>
中放置 <header>
标签。您也不应该在文档的 <head>
和 <body>
之间放置任何内容。
我是一个新手,我一直在绞尽脑汁试图通过尝试不同的方法来找出解决方案来获得正确的结果,但到目前为止我尝试过的任何方法都没有奏效。我也试过在 Whosebug 和 google 上搜索这里。但是到目前为止 none 的解决方案已经解决了问题。
这是我目前的代码 link:http://pastebin.com/x05nGQ1Y
我想要实现的是: 在输入字段上,我可以写一个例子,例如香蕉和苹果等产品。然后在它旁边,我有一个下拉列表,代表我想要的特定产品的数量。然后在最后我有一个 onclick 按钮,它将以 ul 列表的形式显示我订购的内容。如果我拼写错误或为产品设置了错误的数量,我还有一个具有删除当前列表功能的按钮。
现在是我无法解决的部分:我试图获得一个输入以在最后显示所有产品的总量。
假设我从下拉列表中输入数量为 5 的香蕉,然后我添加数量为 3 的苹果和 1 加仑牛奶。这意味着总共有 5 + 3 + 1 = 9 个产品,我试图在最后弹出结果。
在您的 onclick 处理程序中,您需要添加代码来汇总列表中的项目。您没有在此处提供任何有关如何存储该数据的信息,因此我假设您只将该数据存储在页面上的 UL 中。在这种情况下,你只需要计算你的 UL 中的 LI 元素并输出结果。
如果您发布您的代码和 codepen 以便其他人可以查看和修改您的代码,会更容易为您提供帮助。
编辑:我看到你提供了 link。这是我的想法。您将数据点存储为页面上的 LI,而应该将其存储在数据对象数组中并从数据数组中呈现 UL。然后,您可以轻松获取适合您计算的数据点。最好避免将数据存储在 DOM 中,而是将其存储在 javascript.
中的单独数据结构中对于您的情况,您可以保留一个计数器变量来跟踪列表中的项目数,然后在清除列表时重置它。
你所要做的就是..
1) 创建一个输入框显示总数
<input id="total" value="0" />
2) 每当有人添加项目时更新框 - 将这是您的 leggTil
函数放在定义 antall
之后的某处。
document.getElementById('total').value = parseInt(document.getElementById('total').value) + parseInt(antall);
这只是将当前项目的数量添加到框中已有的值。
这是一个工作演示:https://jsfiddle.net/oh376pLw/
此外,与您的问题无关,但您确实不应该在文档的 <head>
中放置 <header>
标签。您也不应该在文档的 <head>
和 <body>
之间放置任何内容。