How to change multiple input values with javascript loop

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.

jfriend00 · Accepted Answer · 2012-02-02 14:02:01Z

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

edited Feb 2, 2012 at 14:02

answered Feb 2, 2012 at 13:56

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jsvnm · Accepted Answer · 2012-02-02 14:14:09Z

0

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

answered Feb 2, 2012 at 14:14

jsvnm

6967 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to change multiple input values with javascript loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related