Question

I’m trying to copy the value from “FROM” fields into “TO” fields. My first attempt was this:

function updateToField(toField,fromField)
{
    toField.value = fromField.value}
}

function verifyFromToFields()
{
var inputs = getElementsByTagName("input");
for (var j = 0; j < inputs.length; j++)
{
    if (inputs[j].name.indexOf('FROM') != -1 && if (inputs[j+1].name.indexOf('TO') != -1)
        {
            var fromField = inputs[j];
            var toField   = inputs[j+1];
            fromField.onchange = function(){updateToField(toField,fromField)};
        }
}

The website has several FROM-TO pairs, and this only seem to work for the last pair in the “inputs” array.

Then I tried this:

function updateToField(toField,fromField)
{
    toField.value = fromField.value}
}

function verifyFromToFields()
{
var inputs = getElementsByTagName("input");
for (var j = 0; j < inputs.length; j++)
{
    if (inputs[j].name.indexOf('FROM') != -1 && if (inputs[j+1].name.indexOf('TO') != -1)
        {
            var fromField = inputs[j];
            var toField   = inputs[j+1];
            fromField.onchange = function(){updateToField(toField,this)};
        }
 }

With this, when any FROM field in the page is modified, it’s copied to the last TO field on the page. I think this is one of those issues I’ve read about parameters as value or reference, but I can’t figure it out.
Also this is a VERY simplified version of the code, I actually fill the inputs list with a getElementsByClass function and must search through childnodes.
Does anyone have a clue on whats going on?

Answer 1

That closure, I do not think it means what you think it means.

This line here:

     fromField.onchange = function(){updateToField(toField,this)};

means “assign to onchange a function that assigns the contents of that fields to whatever toField is at the time of the change!

Since you only have one variable toField all the changeable fields will be assigned to it.

This would work:

var setOnChange = function(fromField, toField) {    
   fromField.onchange = function(){updateToField(toField,this)};
};

for (var j = 0; j < inputs.length; j++)
{
    if (inputs[j].name.indexOf('FROM') != -1 && if (inputs[j+1].name.indexOf('TO') != -1)
        {
            setOnChange(inputs[j], inputs[j+1]);
        }
 }

EDIT: Isaac might have a better explanation of the problem (although I don’t really like his solution).