如何使用javascript循环更改多个输入值

How to change multiple input values with javascript loop

本文关键字：输入 何使用 javascript 循环      更新时间：2023-09-26

我有一个案例，我希望能够允许用户更改他们的单位系统。在这样做的时候，我必须浏览整个页面并：

a） 将单位说明从文本更改为
b） 将当前值转换为新单位。

第一部分使用getElementById和innerHTML可以实现ok。这是我在方面遇到困难的第二部分

示例-我有两个条目，单位为"GIIP（BCF）："，值分别为235和100；

<table id="table2">
  <tr><input id="calc" type="button" value="Test Convert" onClick="conversion();" />
  <td class="leftcol" id=test_units1>GIIP (BCF):</td>
<td><input id=test_value1 size="7" type="number" value="235"> </td>     
  <td class="leftcol" id=test_units2>GIIP (BCF):</td>
 <td><input id=test_value2 size="7" type="number"  value="100" > </td></table>

当我单击该按钮时，将执行以下操作（例如，我想更改单位描述并简单地将现有值加倍）；

    function conversion() {
for (var i = 1, e; e = document.getElementById("test_units" + i); ++i)
e.innerHTML = "m<sup>3</sup>";
convert_values();
}
function convert_values() {
    for (var i = 1, e; e = parseFloat(document.getValueById("test_value" + i)); ++i)
var val = (e*2).toString();
e.innerHTML = val;
}

单位描述转换正常，但值不受影响。有人能提出一种以更优雅的方式转换值的方法吗。请记住，我将在任何一个页面/表单上进行许多转换。

要检索输入对象的值，请使用element.value，其中element是对输入标记的引用。要设置输入的值，请使用element.value = newValue;。两者都不使用.innerHTML。此外，在您的代码中，您将e视为一个位置的值和另一位置的元素。

所以，你可以这样做：

function convert_values() {
    for (var i = 1; i < 2; i++)
        var obj = document.getElementById("test_value" + i);
        obj.value = Number(obj.value) * 2;
}

这应该做到：

function convert_values() {
  for (var i = 1, e; e = document.getElementById("test_value" + i); ++i)
    e.value = parseFloat(e.value)*2;
}

除了使用getElementById和e.value之外，它的工作原理与您的一样，您的版本中发生了一些有趣的事情。。。

相关文章：