Javascript 如何使用JS/jQuery对输入字段进行求和

我正在尝试用输入元素制作一个小计算器。我构建了一个加号按钮，在最后一个输入字段之后插入一个新的输入字段。它起作用了

现在我尝试对每个输入字段求和。但是我在控制台中得到了未定义的。我不知道怎么了，因为我是编程新手。 我试图用class.input time获取输入字段的值，然后将其放入数组中。然后做一个for循环来求和

编辑：

谢谢你的帮助。我使用了@Yoiki的代码，因为这是一种新的、简单的方法。我编辑了截取的代码。它正在工作

$（函数（）{
//添加新的输入字段
$（'.button plus'）。在（'click'，函数（事件）{
event.preventDefault（）；
让输入=$（'.inPut time'）；
让inPutArr=jQuery.makeArray（输入）；
//console.log（inPutArr）；
让lastInPut=inPutArr[inPutArr.length-1]；//获取数组的最后一个元素
$（lastInPut）.addClass（'lastone'）；//向其中添加类
$（'.lastone'）。在（''）之后；
$（'.lastone'）.delay（10）.removeClass（'lastone'）；
});
/*旧代码-不工作！！！
$（“#按钮计算”）。在（'click'，函数（事件）{
event.preventDefault（）；
让inPutV=$（'.input time'）.val（）；
让inPutVal=jQuery.makeArray（inPutV）；
对于（变量i=0；i
/*忽略样式；）*/
输入{
宽度：160px；
高度：20px；
填充：10px 20px 10px 20px；
边界：无；
边界半径：20px；
字体大小：15px；
显示：块；
边缘底部：10px；
}
.集装箱{
背景色：#dde4fe；
填充：20px；
宽度：200px；
右边距：20px；
左边距：自动；
右边距：自动；
边缘顶部：100px；
}
.button plus{
宽度：40px；
高度：40px；
背景色：#9aadfd；
颜色：#fff；
光标：指针；
边缘顶部：10px；
左边距：自动；
右边距：自动；
边界半径：20px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#按钮计算器{
宽度：200px；
高度：40px；
背景色：#5677fc；
颜色：#fff；
光标：指针；
边缘顶部：20px；
页边距底部：0；
}
.btn plus{
宽度：20px；
左边距：自动；
右边距：自动；
高度：5px；
背景色：#5677fc；
边界半径：5px；
位置：绝对位置；
}
.plus-1{
过渡：0.5s；
变换：旋转（0度）；
}
.plus-2{
过渡：0.5s；
变换：旋转（90度）；
}
sum
是未定义的，因此当您向其中添加一个数字时，就是将该数字添加到
未定义的
。您需要先设置
sum=0

为了避免意外使用未定义的值，请尝试在代码的开头包含一个建议，它会强制您定义变量等。
sum
是未定义的，因此当您向其中添加一个数字时，您将该数字添加到
未定义的
。您需要先设置
sum=0

为了避免意外使用未定义的值，请尝试在代码的开头包含这些值——这会迫使您定义变量，以及其他内容。
收集对象时不要使用
val（）

inPutV=$（'.input time'）

但在提取值时使用
val（）
：

sum=sum+inPutVal[i].val（）
在收集对象时不要使用
val（）

inPutV=$（'.input time'）

但在提取值时使用
val（）
：

sum=sum+inPutVal[i].val（）
您正在尝试从jQuery选择中分配返回的元素。您需要迭代元素并从每个元素中提取对象。我没有在这里进行isNaN或任何错误检查，但这是可行的

$('#button-calc').on('click', function(event) {
  event.preventDefault();
  var total = 0;
  $.each( $('input.input-time'), function(idx, elm) {
    var v = $(elm).val()
    total += parseFloat(v);
  });

  console.log(total);

});

我还使用了parseFloat来解释浮点数。
您正在尝试分配jQuery选择返回的元素。您需要迭代元素并从每个元素中提取对象。我没有在这里进行isNaN或任何错误检查，但这是可行的

$('#button-calc').on('click', function(event) {
  event.preventDefault();
  var total = 0;
  $.each( $('input.input-time'), function(idx, elm) {
    var v = $(elm).val()
    total += parseFloat(v);
  });

  console.log(total);

});

此外，我还使用parseFloat来解释浮点数。
您可以在这里使用map/reduce操作来简化代码。
您可以
map（）
它们只返回值，然后
reduce（）
这个值数组加上一个加法，而不是循环输入


$（函数（）{
//添加新的输入字段
$（'.button plus'）。在（'click'，函数（事件）{
event.preventDefault（）；
让输入=$（'.inPut time'）；
让inPutArr=jQuery.makeArray（输入）；
//console.log（inPutArr）；
让lastInPut=inPutArr[inPutArr.length-1]；//获取数组的最后一个元素
$（lastInPut）.addClass（'lastone'）；//向其中添加类
$（'.lastone'）。在（''）之后；
$（'.lastone'）.delay（10）.removeClass（'lastone'）；
});
//现在正在做计算工作
$（“#按钮计算”）。在（'click'，函数（事件）{
event.preventDefault（）；
var sum=$（'.container内部输入[type=text]'）.map（函数（索引，ob）{
返回parseInt（ob.value）；
}).get（）.reduce（函数（a，b）{
返回a+b；
});
控制台日志（总和）；
});
});
/*忽略样式；）*/
输入{
宽度：160px；
高度：20px；
填充：10px 20px 10px 20px；
边界：无；
边界半径：20px；
字体大小：15px；
显示：块；
边缘底部：10px；
}
.集装箱{
背景色：#dde4fe；
填充：20px；
宽度：200px；
右边距：20px；
左边距：自动；
右边距：自动；
边缘顶部：100px；
}
.button plus{
宽度：40px；
高度：40px；
背景