如何使用 JavaScript 循环和评估按顺序命名的表单元素

Question

我需要循环并通过调用函数 updt() 来评估表单元素的值。

 const updt = () => { let f = document.forms['myform']; f.r1c3.value = f.r1c1.value * f.r1c2.value; f.r2c3.value = f.r2c1.value * f.r2c2.value; f.r3c3.value = f.r3c1.value * f.r3c2.value; }

 <form id="myform" name="myform"> <input type="text" name="r1c1" onchange="updt()"> <input type="text" name="r1c2"> <input type="text" name="r1c3"> <input type="text" name="r2c1"> <input type="text" name="r2c2"> <input type="text" name="r2c3"> <input type="text" name="r3c1"> <input type="text" name="r3c2"> <input type="text" name="r3c3"> </form>

我的愿望是遍历表单元素，并用 c1 和 c2 的乘积填充 c3。 这是我的尝试...

  for (var n=1;  n<=3; n++) {
    `f.r${n}c3.value` =  `f.r${n}c1.value` * `f.r${n}c2.value`;
  }

上面的循环不起作用。

eval() 适用于右侧。 但是左边还是不行。

我想循环的原因是因为大约有 20 行，而不仅仅是上面显示的 3 行。 所以我想以某种方式缩短代码。

有什么想法吗？

TIA

Answer 1

您可以简单地使用括号表示法来动态访问属性，如下所示：

for (var n=1;  n<=3; n++) {
    f[`r${n}c3`].value =  f[`r${n}c1`].value` * f[`r${n}c2`].value;
}

Answer 2

这只会产生一个string ，仅此而已：

`f.r${n}c3.value`

所以它不是可执行代码。 eval可以提供帮助，但有一种更简单的方法可以做到这一点。 您可以使用字符串来访问对象的属性名称。 由于只有一个属性名称在改变，其余的可以像任何其他的代码一样。 例如：

f[`r${n}c3`].value

所以整行将是：

f[`r${n}c3`].value =  f[`r${n}c1`].value * f[`r${n}c2`].value;

Answer 3

我发布答案只是因为我做了一个单线，它看起来很棒:)

1. 表单上的扩展运算符为您提供表单的所有输入
2. 然后我过滤它们以仅获取 rc3 输入（结果）
3. 最后我用该行的其他两个输入设置每个值

const myform = document.forms['myform']

const setFormValue = () => 
    [...myform]
    .filter(input => /^r\dc3$/.test(input.name))
    .forEach(input => input.value = Number(myform[input.name.replace(/\d$/, '1')].value) * Number(myform[input.name.replace(/\d$/, '2')].value))

myform.addEventListener('submit', e => {
    e.preventDefault();
    setFormValue()
});