Javascript 如何在输入框中显示数量的总数

我有一个数量字段。用户可以单击“添加”按钮添加多个数量字段。

我的问题是，我必须在输入框中显示数量的总数。例如，我在“数量”框中添加了10个数量，在“总数”框中的总数是10

用户可以通过点击加号和减号按钮来增加和减少数量，也可以直接输入，然后数量框中的数量和合计将显示在合计框中

用户可以添加与删除相同的多个数量字段。我单击以删除应从总量字段中删除的数量

你也可以在这里检查我的代码

函数递增值（n）{
var value=parseInt（document.getElementById（'number'+n）.value，10）；
值=isNaN（值）？0：值；
值++；
document.getElementById（'number'+n）.value=value；
}
函数递减值（n）{
var value=parseInt（document.getElementById（'number'+n）.value，10）；
值=isNaN（值）？0：值；
值<1？值=1:“”；
价值--；
document.getElementById（'number'+n）.value=value；
}
$（文档）.ready（函数（）{
var max_fields=20；//允许的最大输入框数
var wrapper=$（“.add_行”）；//字段包装器
var add_button=$（“.add_row_click”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x

-
+
+加
您可以简化所有这些


对每个更改运行
sum（）
，包括删除和直接输入/粘贴
只有一个加号/减号的事件处理程序
删除内联处理程序

PS：我发现了一个bug：
value<1？值=1:''将强制值为1

PPS：我建议您为div使用.clone，而不是插入它。使更新HTML更加容易。因为我委托并使用相对寻址，所以您不需要更改字段的ID


函数和（）{
var合计=0；
$（“.qty_number”）.each（function（）{//或use.map.get（）
总计+=此.value？parseInt（此.value）：0；
})
$（“总数量”）.val（总计）；
}
$（文档）.ready（函数（）{
var max_fields=20；//允许的最大输入框数
var$wrapper=$（“.add_行”）；//字段包装器
var add_button=$（“.add_row_click”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。在（“单击”）上，函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x

-
+
+加
@vsync阅读问题的标题谢谢你的回答，给我一些时间在我的代码中实现。请注意，我刚刚更新了代码以处理删除操作，因此我建议你对div使用.clone，而不是插入它。使更新HTML更加容易。因为我委托并使用相对寻址，所以您不需要更改字段的ID。我正在检查您的代码以理解。另外，我注意到您删除了增加和减少功能。是的，它们不再需要。另外，我刚刚添加了
$（“.plus\u减号”）.on（“input”、“.qty\u number”、sum）
因为字段不是只读的，所以用户可以在不使用+/-