javascript在字段中循环，添加值并显示在另一个字段上

我有下面的代码，它在许多字段中循环，它们的ID前缀和后缀是相同的，请参见下面的代码。 我一直在尝试添加所有相关字段的总值，并将其显示在文本框Id txtTOTAL20、txtTOTAL40和txtTOTAL50上。 这就是我目前所拥有的（不起作用）

for（变量i=1；i<14；i++）{
x=i+1
var field1=“txtF”+i+“_1”；
var field2=“txtF”+i+“\u 2”；
var field3=“txtF”+i+“\u 3”
FIELD20=FIELD20+parseInt（field1.value）；
FIELD40=FIELD40+parseInt（field2.value）；
FIELD50=FIELD50+parseInt（field3.value）；
var text=document.getElementById（'txtTOTAL20'）；text.value=FIELD20；
var text=document.getElementById（'txtTOTAL40'）；text.value=FIELD40；
var text=document.getElementById（'txtTOTAL50'）；text.value=FIELD50；
}

有什么想法吗？

这应该行得通：

//init
var FIELD20 = 0;
var FIELD40 = 0;
var FIELD50 = 0;

for (var i = 1; i < 14; i++) {
    //get values
    var field1 = document.getElementById("txtF" + i + "_1"); 
    var field2 = document.getElementById("txtF" + i + "_2"); 
    var field3 = document.getElementById("txtF" + i + "_3");

    //increment
    FIELD20 += parseInt(field1.value);
    FIELD40 += parseInt(field2.value);
    FIELD50 += parseInt(field3.value);
}

//display totals
document.getElementById('txtTOTAL20').value = FIELD20;
document.getElementById('txtTOTAL40').value = FIELD40;
document.getElementById('txtTOTAL50').value = FIELD50;

//初始化
var FIELD20=0；
var FIELD40=0；
var FIELD50=0；
对于（变量i=1；i<14；i++）{
//获取价值
var field1=document.getElementById（“txtF”+i+“_1”）；
var field2=document.getElementById（“txtF”+i+“\u 2”）；
var field3=document.getElementById（“txtF”+i+“\u3”）；
//增量
FIELD20+=parseInt（field1.value）；
FIELD40+=parseInt（field2.值）；
FIELD50+=parseInt（field3.值）；
}
//显示总数
document.getElementById（'txtTOTAL20'）。value=FIELD20；
document.getElementById（'txtTOTAL40'）。value=FIELD40；
document.getElementById（'txtTOTAL50'）。value=FIELD50；

您想做的最好是通过“数据绑定”来完成。请在此处查看此基本示例：

var input = document.querySelector('#a');
var output = document.querySelector('p');

function update(event) {
   output.innerHTML = input.value;
}
input.addEventListener('keydown', update);
input.addEventListener('keyup', update);

我们监听键向上和键向下事件，然后更改我们的值

如果您有一个大表，这可能会很笨拙，因为我们必须将每个输入绑定到它的输出。ES6就不是这样了！相反，我们仍然将侦听器添加到输入中，但我们将它们都绑定到一个JS对象。这是一个事件侦听器，而不是几十个其他侦听器。我们通过互联网来实现这一点

请查看：

var input = document.querySelectorAll('input');
var output = document.querySelectorAll('td');

input = Array.prototype.slice.call(input);

/*
Here you model out your "table" as a JS object
so that we can listen for changes more easily.
*/
var table = {
    a: '',
    b: ''
};

input.forEach(function addListeners(input) {
    //Closured! 
    function update(event) {
        table[input.id] = input.value
    }
    input.addEventListener('keydown', update);
    input.addEventListener('keyup', update);
});

//You'd have to make some more clever function.
function alphaToCell(alpha) {
    if (alpha === 'a') return 0;
    if (alpha === 'b') return 1;
}

/*
The cool thing here is that instead of binding each input to it's output, we just bind every input to a single model, and then that model knows how to update all the outputs.
*/
Object.observe(table, function (changes) {
    changes.forEach(function (change) {
        var index = alphaToCell(change.name);
        output[index].innerHTML = table[change.name];
    })
});

---

当然可以，但你应该解释一下你修复了什么以及为什么会这样。太好了！，除了最终值（字段20）是NaN而不是实数之外，这段代码非常有效。我假设文本值没有被正确转换。好的，在互联网上搜索我找到了这个，它可以工作。使用Math.floor:field20+=Math.floor（field1.value），而不是使用parseInt；感谢您的帮助，kantholy.explaution:*字段20/40/50未初始化，导致增加值时出现问题*“document.getElementById”在字段1/2/3中缺失感谢您的代码/想法。不，我不想显示每个增量的数据。我有3列，每列有14个字段。每次用户更改字段上的任何值时，我都希望javascript代码重新计算每列的总数（位于底部）。我感谢您花时间向我展示。问题是，kantholy上面的代码就像一个符咒，只需要我在评论中提到的一个小改动。@user1135218，只要你在学习，就没有问题。看看我的新答案。这会让你大吃一惊。你的代码听起来很棒，并且会在将来的项目中记住它。我明白/不明白它的功能和用途，但目前它对我来说有点太复杂了，我只是一个初学者！是的，哈哈：我读了几遍你的问题后意识到我对ES6有点兴奋，并没有真正回答你的问题。

var input = document.querySelectorAll('input');
var output = document.querySelectorAll('td');

input = Array.prototype.slice.call(input);

/*
Here you model out your "table" as a JS object
so that we can listen for changes more easily.
*/
var table = {
    a: '',
    b: ''
};

input.forEach(function addListeners(input) {
    //Closured! 
    function update(event) {
        table[input.id] = input.value
    }
    input.addEventListener('keydown', update);
    input.addEventListener('keyup', update);
});

//You'd have to make some more clever function.
function alphaToCell(alpha) {
    if (alpha === 'a') return 0;
    if (alpha === 'b') return 1;
}

/*
The cool thing here is that instead of binding each input to it's output, we just bind every input to a single model, and then that model knows how to update all the outputs.
*/
Object.observe(table, function (changes) {
    changes.forEach(function (change) {
        var index = alphaToCell(change.name);
        output[index].innerHTML = table[change.name];
    })
});