How To Change the Function an Event Handler Points To

MORE INFORMATION

In the following example, the next time this button is pressed, you want to invoke this function with a different value for arguments. This function should get called with the value "value 2." The following code demonstrates two intuitive but incorrect methods of doing this. The two methods are commented.

<HTML>
<HEAD>
<TITLE>Changing event handlers at run-time</TITLE>
<script language="JScript">
<!--
function test (sArgs)
{
    alert ("I am test ()" + sArgs);

    // this actually calls the function,
    // which doesn't change it
    // and causes recursion.
    // btn1.onclick = test ('value 2')

    // this just changes the onclick
    // value to a new string,
    // but doesn't change the function.
    // btn1.onclick = "test ('value 2')"

}
-->
</script>
</HEAD>
<BODY>
<input id=btn1 type=button value="(JScript)Change function"
  onClick="test('value 1');">
</BODY>
</HTML>
				

The following three lines build a string for use with the Function object in JScript and will change the handler function that onClick points to. Replace the two commented statements above with these three statements to correctly change the handler function.

   var newHandlerArg = "value 2" ;
   var newFunctionBody = "test('" + newHandlerArg + "');" ;
   btn1.onclick = new Function(newFunctionBody);