Javascript Singleton How to Call Function

I have a singleton here that I am trying to use the same instance for in my form validation. I have a form with 20 onChange events where I need to use the same instance of the singleton to call the testChanges function shown below. Does anyone know what my problem might be?

Here is my .js code

var changeChecker = (function(){
var rowNum = 0;
var houseId = 'house' + rowNum;
var spreadTypeId = 'spreadType' + rowNum;
var callPutId = 'callPut' + rowNum;
var labelRowId = 'labelRow' + ( rowNum + 1 );
var labelRowNum = 3;
var instance;
return { 
        testChanges: function(){
        spreadType = document.getElementById(spreadTypeId).options[document.getElementById(spreadTypeId).selectedIndex].text;
        alert(document.getElementById(spreadTypeId).options[document.getElementById(spreadTypeId).selectedIndex].text);
        if ( this.spreadType == 'Spread' )
        {
            rowId = document.getElementById('inputTable').rows[labelRowNum].id;
            document.getElementById(rowId).style.display = 'table-row';
            rowId = document.getElementById('inputTable').rows[labelRowNum + 1].id;
            document.getElementById(rowId).style.display = 'table-row';
            rowId = document.getElementById('inputTable').rows[labelRowNum + 3].id;
            document.getElementById(rowId).style.display = 'table-row';
            rowId = document.getElementById('inputTable').rows[labelRowNum + 4].id;
            document.getElementById(rowId).style.display = 'table-row';
            rowNum += 6;
            labelRowNum += 9;
        }
        else if ( spreadType == 'Fly' )
        {

        }
        else if ( spreadType == 'Straddle' )
        {

        }
        else if ( spreadType == 'Strangle' )
        {

        }
        else if ( spreadType == 'Tree' )
        {

        }
        else if ( spreadType == 'Condor' )
        {

        }
       开发者_如何学Go else if ( spreadType == 'Ladder' )
        {

        }
        else
        {

        }

    }

}

})();

And here is how I am trying to call the the testChanges function from the 20 different locations.

<select onchange='changeChecker.testChanges();' name='spreadType[]' id='spreadType0'>

or

<select onchange='changeChecker.testChanges();' name='spreadType[]' id='$spreadTypeId'>

The main issue is that you have a debugging variable

var rowNum = 0

it should be

function(rowNum){

}

You hardcoded in the row number. And didnt add the parameter to the function inside your php.

ie changeChecker.testChange( $i )

If I guess right what you're trying to do - you have a table with 20 rows, in each row there's a select tag, to which you're attaching an onchange event.

In your code sample, the checker function is a part of a closure in which spreadTypeId is also a member. Now, having that variable a "private" member of this closure, and having the function that creates this closure execute only once - it's value will allways be spreadType0.

If in deed that is what you're trying to do - you should allow to pass the rowNum as an argument to the check-function:

testChanges: function(rowNum){
   //...
}

so that each of your 20 selects would be written as

<select onchange='changeChecker.testChanges(0);' name='spreadType[]' id='spreadType0'>

<select onchange='changeChecker.testChanges(1);' name='spreadType[]' id='spreadType1'>

<select onchange='changeChecker.testChanges(2);' name='spreadType[]' id='spreadType2'>

all way to

<select onchange='changeChecker.testChanges(20);' name='spreadType[]' id='spreadType20'>

Also note - that the name you give the select tags is also problematic: The name attribute of an input/textarea/select tag is the name of the field as it will be seen on the server, where elements with the same name are anyway understood as arrays, so that the [] completely redundant - if not trouble making.