使用 for 循环和 HTML 输入在 Javascript 中创建数组

Question

我在我的 html 表单中索引了一堆输入。

我想遍历输入并创建一个数组。我想从该数组中收集字段的总数（总和），最后附加另一个 HTML 输入以显示该总数。

我知道如何在 PHP 中执行此操作，但我在使用 JavaScript 时遇到了困难，我需要它在客户端完成。

我试图尽可能多地构建这个。 Here 是一个 jsFiddle：

这是我的html：

<div style="padding:5px;clear:both;"><input type="text" name="total_inkind" id="total_inkind" placeholder="$" onchange="calcInKind()"></div>

和 Javascript：

function calcInKind() {
    var runningTotal = 0;
    var i = 0;
    for (var i = 0; document.getElementById('inkind').value; i++){
        if(document.getElementById('inkind').value != ''){
            $gwyl_gr = document.getElementById('inkind').value;
            $runningTotal = parseFloat($runningTotal) + parseFloat($gwyl_gr);
            }else{
            $gwyl_gr = 0;
            }
            i = i++;
        }
    document.getElementById('total_inkind').value = $runningTotal;
    }

Answer 1

对于像所有表单元素的总和这样简单的事情，除非您想以多种方式操作每个值，否则您实际上并不需要数组。但是，您可以遍历表单中的每个输入，获取其值并将其添加到总数中。

但是，查看您的代码，我必须指出，与 PHP 不同，Javascript 不要求变量以 $ 开头。但是，您有机会使用 JQuery 用户经常使用的它们来表示他们的变量实际上是 JQuery 变量。

我分叉了您的 JSFiddle 并重写了一些内容以使其按问题所述运行：JSFiddle

function sumTheInkinds() {
    var runningTotal = 0;
    var ourlist = document.getElementsByClassName("inkind");
    for (var i = 0; i < ourlist.length; i++) {

        if (ourlist[i].value != '') {
            try {
                runningTotal = runningTotal + parseFloat(ourlist[i].value);
            } catch (err) {
                alert ("Value was not a float!");
            }
        }

    }

    document.getElementById('total_inkind').value = runningTotal;
};
document.getElementById("runcalc").onclick = sumTheInkinds;

然而，我的实现依赖于一个可能不是有意的按钮按下，通过应用它可以很容易地改回 onchange：

var inks = document.getElementsByTagName("inkind"); 
for (var i=0;i<inks.length;i++) {
    inks.onchange = sumTheInkinds;
}