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

Question

I have a case where I'd like to be able to allow the users to change their units system. In doing so I would have to go through the entire page and:

a) change the units description from text and
b) convert the current values to the new units.

The first part I can achieve ok using getElementById and innerHTML . Its the second part I am having difficulty with

Example - I have two entries with units of "GIIP (BCF):" and values of 235 and 100 respectively;

<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>

When I click the button, the following executes (where for the example I want to change the units description and simply double the existing value);

    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;
}

The units description converts OK, but the values are unaffected. Can anyone suggest a method to convert the values in a more elegant fashion (or indeed at all!). Bear in mind that I'll have many of these conversions to do on any one page/form.

Answer 1

To retrieve the value of an input object, you use element.value where element is a reference to the input tag. To set the value of an input, you use element.value = newValue; . You don't use .innerHTML for either. Also, in your code, you are treating e as the value in one place and the element in another place.

So, you can do it like this:

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

Answer 2

This should do it:

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

Works like what you had, except uses getElementById and e.value , you had something funny going on in your version...