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

Create an array in Javascript using a for loop and HTML inputs

本文关键字：创建 数组 一个 Javascript 循环 for HTML 输入 使用      更新时间：2023-09-26

我在html表单中为一堆输入建立了索引。

我想循环输入并创建一个数组。我想从这个数组中收集字段的总和，最后附加另一个HTML输入来显示该总和。

我知道如何在PHP中做到这一点，但我在JavaScript方面很吃力，我需要在客户端完成它。

我试着尽可能多地构建这个。这里有一个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;
    }

对于像所有表单元素的总和这样简单的东西，除非你想以多种方式操作每个值，否则你并不真正需要数组。但是，您可以对表单中的每个输入进行循环，获取其值并将其添加到总数中。

然而，在查看您的代码时，我不得不指出，与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;
}
相关文章：