I am invoking a js library file name selection.js to a static page using the below. var selectionobj = new Selection('grid1',{selectedClassName:'GridColor',onSelect:test()}); where - grid1 is a element name - selectedClassName is an ooption value - onSelect an event handler - GridColor is CSS class name and test() is function. - test() is function The code is <html> <head> <title>Selection Grid</title> <link rel='stylesheet' type='text/css' href='css/selection.css'> <script type='text/javascript' src='js/prototype.js'></script> <script type='text/javascript' src='js/selection.js'></script> <script type='text/javascript'> $(grid1).observe('click', function(event){ var selectionobj = new Selection('grid1',{selectedClassName:'GridColor',onSelect:test()}); }) </script> </head> <body> <div class='Layout' id='GridLayout'> <div class='GridBox' id='grid1' name='grid1'> hai </div> </div> </body> </html> so onSelected the element it should adds a css class and onDeselected it removes the css class. select select function is _select : function ( element, event ) //----------------------------------- { // is the element presently selected? if ( !element._selected ) { // if not ... // are there any elements selected? if ( this._selectedCount > 0 ) { // if so ... // are mutliple selections pemited? if ( this.options.multiple ) { // if so ... // is there no selection limit or, if there is a limit, are we // currently below it? if ( !this.options.limit || this._selectedCount << this.options.limit ) { // if so ... // is there no specified onSelect handler or, if it was specified, // did it return true? if ( typeof this.options.onSelect != 'function' || this.options.onSelect( event, element ) ) { // if so ... // select the element element._deselected = false; element._selected = true; this._setElementClassName ( element ); // are there any other selected elements? if ( !this._selectCount ) // if not, mark all other elements as 'deselected' this._setDeselected (); // increment the selection count this._selectedCount++; // invoke the selected handler, if specified if ( typeof this.options.onSelected == 'function' ) this.options.onSelected( element ); } } } // otherwise, mutliple selections are not permited ... else { // is there no specified onSelect handler or, if it was specified, // did it return true? if ( typeof this.options.onSelect != 'function' || this.options.onSelect( event, element ) ) { // if so ... // clear the selection this.clear ( true ); // select the element element._deselected = false; element._selected = true; this._setElementClassName ( element ); // mark all other elements as 'deselected' this._setDeselected (); // increment the selection count this._selectedCount++; // invoke the selected handler, if specified if ( typeof this.options.onSelected == 'function' ) this.options.onSelected( element ); } } } // otherwise, there is no current selection else { // is there no specified onSelect handler or, if it was specified, // did it return true? if ( typeof this.options.onSelect != 'function' || this.options.onSelect( event, element ) ) { // if so ... // select the element element._deselected = false; element._selected = true; this._setElementClassName ( element ); // mark all other elements as 'deselected' this._setDeselected (); // increment the selection count this._selectedCount++; // invoke the selected handler, if specified if ( typeof this.options.onSelected == 'function' ) this.options.onSelected( element ); } } } // otherwise, the clicked on element is currently selected. else { // is there no specified onDeselect handler or, if it was specified, // did it return true? if ( typeof this.options.onDeselect != 'function' || this.options.onDeselect( event, element ) ) { // if so ... // select the element element._selected = false; // increment the selection count this._selectedCount--; // are there any other selected elements? if ( this._selectCount ) // if so, mark this element as deselected element._deselected = true; else // if not, reset all deselected elements this._resetDeselected (); // set the elements class name this._setElementClassName ( element ); // invoke the selected handler, if specified if ( typeof this.options.onSelected == 'function' ) this.options.onDeselected( element ); } } }, // // Actually deselect the element // _deselect: function ( element, event ) //------------------------------------ { var element = $( element ); // is there no specified onDeselect handler or, if it was specified, // did it return true? if ( typeof this.options.onDeselect != 'function' || this.options.onDeselect( event, element ) ) { // if so ... // select the element element._selected = false; // increment the selection count this._selectedCount--; // are there any other selected elements? if ( this._selectCount ) // if so, mark this element as deselected element._deselected = true; else // if not, reset all deselected elements this._resetDeselectedClassName (); // set the elements class name this._setElementClassName ( element ); // invoke the selected handler, if specified if ( typeof this.options.onSelected == 'function' ) this.options.onDeselected( element ); } }, and the css file is .Layout{ border: 1px solid blue; width: 385px; height: 383px; padding-bottom:5px; } .GridRows{ width: 300px height: 30px; } .GridBox{ border: 1px solid red; width: 30px; height: 30px; margin: 4px; float: left; } .GridColor{ width: 30px; height: 30px; margin: 4px; float: left; border: 1px solid green; } Kindly help me to invoke the js correctly