How can I pass arguments to anonymous functions in JavaScript

Question

I m trying to figure out how to pass arguments to an anonymous function in JavaScript   Check out this sample code and I think you will see what I mean    lt input type  button  value  Click me  id  myButton    gt    lt script type  text javascript  gt      var myButton   document getElementById  myButton        var myMessage    it s working       myButton onclick   function myMessage    alert myMessage       lt  script gt    When clicking the button the message  it s working should appear   However the myMessage variable inside the anonymous function is null   jQuery uses a lot of anonymous functions  what is the best way to pass that argument

User · Answer

If you write it like  myButton onclick   function     alert myMessage        It will work  but I don t know if that answers your questions

User · Answer

By removing the parameter from the anonymous function will be available in the body       myButton onclick   function     alert myMessage        For more info search for  javascript closures

User · Answer

What you ve done doesn t work because you re binding an event to a function   As such  it s the event which defines the parameters that will be called when the event is raised  i e  JavaScript doesn t know about your parameter in the function you ve bound to onclick so can t pass anything into it     You could do this however    lt input type  button  value  Click me  id  myButton   gt    lt script type  text javascript  gt       var myButton   document getElementById  myButton         var myMessage    it s working        var myDelegate   function message            alert message              myButton onclick   function              myDelegate myMessage            lt  script gt

User · Answer

Your specific case can simply be corrected to be working    lt script type  text javascript  gt    var myButton   document getElementById  myButton      var myMessage    it s working     myButton onclick   function     alert myMessage       lt  script gt    This example will work because the anonymous function created and assigned as a handler to element will have access to variables defined in the context where it was created   For the record  a handler  that you assign through setting onxxx property  expects single argument to take that is event object being passed by the DOM  and you cannot force passing other argument in there

User · Answer

Example    lt input type  button  value  Click me  id  myButton  gt   lt script gt      var myButton   document getElementById  myButton        var test    zipzambam       myButton onclick   function eventObject            if   eventObject                eventObject   window event                    if   eventObject target                eventObject target   eventObject srcElement                    alert eventObject target           alert test               function myMessage            alert myMessage           Hello     lt  script gt

User · Answer

Your specific case can simply be corrected to be working    lt script type  text javascript  gt    var myButton   document getElementById  myButton      var myMessage    it s working     myButton onclick   function     alert myMessage       lt  script gt    This example will work because the anonymous function created and assigned as a handler to element will have access to variables defined in the context where it was created   For the record  a handler  that you assign through setting onxxx property  expects single argument to take that is event object being passed by the DOM  and you cannot force passing other argument in there

User · Answer

By removing the parameter from the anonymous function will be available in the body       myButton onclick   function     alert myMessage        For more info search for  javascript closures

User · Answer

Event handlers expect one parameter which is the event that was fired  You happen to be renaming that to  myMessage  and therefore you are alerting the event object rather than your message   A closure can allow you to reference the variable you have defined outside the function however if you are using Jquery you may want to look at its event specific API e g   http   docs jquery com Events bind typedatafn  This has an option for passing in your own data

User · Answer

By removing the parameter from the anonymous function will be available in the body       myButton onclick   function     alert myMessage        For more info search for  javascript closures

User · Answer

The following is a method for using closures to address the issue to which you refer  It also takes into account the fact that may which to change the message over time without affecting the binding  And it uses jQuery to be succinct   var msg    function message     var  message   message    return       say function   alert  message        change function message   message   message           My Message        myButton   click msg say

User · Answer

Your specific case can simply be corrected to be working    lt script type  text javascript  gt    var myButton   document getElementById  myButton      var myMessage    it s working     myButton onclick   function     alert myMessage       lt  script gt    This example will work because the anonymous function created and assigned as a handler to element will have access to variables defined in the context where it was created   For the record  a handler  that you assign through setting onxxx property  expects single argument to take that is event object being passed by the DOM  and you cannot force passing other argument in there

User · Answer

The delegates   function displayMessage message  f        f message      execute function  f  with variable  message     function alerter message        alert message      function writer message        document write message       Running the displayMessage function   function runDelegate         displayMessage  Hello World    alerter      alert message      displayMessage  Hello World    writer      write message to DOM

User · Answer

What you ve done doesn t work because you re binding an event to a function   As such  it s the event which defines the parameters that will be called when the event is raised  i e  JavaScript doesn t know about your parameter in the function you ve bound to onclick so can t pass anything into it     You could do this however    lt input type  button  value  Click me  id  myButton   gt    lt script type  text javascript  gt       var myButton   document getElementById  myButton         var myMessage    it s working        var myDelegate   function message            alert message              myButton onclick   function              myDelegate myMessage            lt  script gt

User · Answer

If you write it like  myButton onclick   function     alert myMessage        It will work  but I don t know if that answers your questions

User · Answer

The delegates   function displayMessage message  f        f message      execute function  f  with variable  message     function alerter message        alert message      function writer message        document write message       Running the displayMessage function   function runDelegate         displayMessage  Hello World    alerter      alert message      displayMessage  Hello World    writer      write message to DOM

User · Answer

Event handlers expect one parameter which is the event that was fired  You happen to be renaming that to  myMessage  and therefore you are alerting the event object rather than your message   A closure can allow you to reference the variable you have defined outside the function however if you are using Jquery you may want to look at its event specific API e g   http   docs jquery com Events bind typedatafn  This has an option for passing in your own data

User · Answer

Your specific case can simply be corrected to be working    lt script type  text javascript  gt    var myButton   document getElementById  myButton      var myMessage    it s working     myButton onclick   function     alert myMessage       lt  script gt    This example will work because the anonymous function created and assigned as a handler to element will have access to variables defined in the context where it was created   For the record  a handler  that you assign through setting onxxx property  expects single argument to take that is event object being passed by the DOM  and you cannot force passing other argument in there

User · Answer

What you have done is created a new anonymous function that takes a single parameter which then gets assigned to the local variable myMessage inside the function  Since no arguments are actually passed  and arguments which aren t passed a value become null  your function just does alert null

User · Answer

The delegates   function displayMessage message  f        f message      execute function  f  with variable  message     function alerter message        alert message      function writer message        document write message       Running the displayMessage function   function runDelegate         displayMessage  Hello World    alerter      alert message      displayMessage  Hello World    writer      write message to DOM

User · Answer

What you have done is created a new anonymous function that takes a single parameter which then gets assigned to the local variable myMessage inside the function  Since no arguments are actually passed  and arguments which aren t passed a value become null  your function just does alert null

User · Answer

Event handlers expect one parameter which is the event that was fired  You happen to be renaming that to  myMessage  and therefore you are alerting the event object rather than your message   A closure can allow you to reference the variable you have defined outside the function however if you are using Jquery you may want to look at its event specific API e g   http   docs jquery com Events bind typedatafn  This has an option for passing in your own data

User · Answer

By removing the parameter from the anonymous function will be available in the body       myButton onclick   function     alert myMessage        For more info search for  javascript closures

User · Answer

If you write it like  myButton onclick   function     alert myMessage        It will work  but I don t know if that answers your questions

User · Answer

lt input type  button  value  Click me  id  myButton    gt    lt script type  text javascript  gt      var myButton   document getElementById  myButton         myButton myMessage    it s working        myButton onclick   function     alert this myMessage         lt  script gt    This works in my test suite which includes everything from IE6    The anonymous function is aware of the object which it belongs to therefore you can pass data with the object that s calling it   in this case myButton

User · Answer

Example    lt input type  button  value  Click me  id  myButton  gt   lt script gt      var myButton   document getElementById  myButton        var test    zipzambam       myButton onclick   function eventObject            if   eventObject                eventObject   window event                    if   eventObject target                eventObject target   eventObject srcElement                    alert eventObject target           alert test               function myMessage            alert myMessage           Hello     lt  script gt

User · Answer

The following is a method for using closures to address the issue to which you refer  It also takes into account the fact that may which to change the message over time without affecting the binding  And it uses jQuery to be succinct   var msg    function message     var  message   message    return       say function   alert  message        change function message   message   message           My Message        myButton   click msg say

User · Answer

If you write it like  myButton onclick   function     alert myMessage        It will work  but I don t know if that answers your questions

User · Answer

Example    lt input type  button  value  Click me  id  myButton  gt   lt script gt      var myButton   document getElementById  myButton        var test    zipzambam       myButton onclick   function eventObject            if   eventObject                eventObject   window event                    if   eventObject target                eventObject target   eventObject srcElement                    alert eventObject target           alert test               function myMessage            alert myMessage           Hello     lt  script gt

User · Answer

What you ve done doesn t work because you re binding an event to a function   As such  it s the event which defines the parameters that will be called when the event is raised  i e  JavaScript doesn t know about your parameter in the function you ve bound to onclick so can t pass anything into it     You could do this however    lt input type  button  value  Click me  id  myButton   gt    lt script type  text javascript  gt       var myButton   document getElementById  myButton         var myMessage    it s working        var myDelegate   function message            alert message              myButton onclick   function              myDelegate myMessage            lt  script gt

User · Answer

Example    lt input type  button  value  Click me  id  myButton  gt   lt script gt      var myButton   document getElementById  myButton        var test    zipzambam       myButton onclick   function eventObject            if   eventObject                eventObject   window event                    if   eventObject target                eventObject target   eventObject srcElement                    alert eventObject target           alert test               function myMessage            alert myMessage           Hello     lt  script gt

User · Answer

What you have done is created a new anonymous function that takes a single parameter which then gets assigned to the local variable myMessage inside the function  Since no arguments are actually passed  and arguments which aren t passed a value become null  your function just does alert null

User · Answer

Event handlers expect one parameter which is the event that was fired  You happen to be renaming that to  myMessage  and therefore you are alerting the event object rather than your message   A closure can allow you to reference the variable you have defined outside the function however if you are using Jquery you may want to look at its event specific API e g   http   docs jquery com Events bind typedatafn  This has an option for passing in your own data

User · Answer

What you have done is created a new anonymous function that takes a single parameter which then gets assigned to the local variable myMessage inside the function  Since no arguments are actually passed  and arguments which aren t passed a value become null  your function just does alert null

User · Answer

The delegates   function displayMessage message  f        f message      execute function  f  with variable  message     function alerter message        alert message      function writer message        document write message       Running the displayMessage function   function runDelegate         displayMessage  Hello World    alerter      alert message      displayMessage  Hello World    writer      write message to DOM

User · Answer

What you ve done doesn t work because you re binding an event to a function   As such  it s the event which defines the parameters that will be called when the event is raised  i e  JavaScript doesn t know about your parameter in the function you ve bound to onclick so can t pass anything into it     You could do this however    lt input type  button  value  Click me  id  myButton   gt    lt script type  text javascript  gt       var myButton   document getElementById  myButton         var myMessage    it s working        var myDelegate   function message            alert message              myButton onclick   function              myDelegate myMessage            lt  script gt

User · Answer

lt input type  button  value  Click me  id  myButton    gt    lt script type  text javascript  gt      var myButton   document getElementById  myButton         myButton myMessage    it s working        myButton onclick   function     alert this myMessage         lt  script gt    This works in my test suite which includes everything from IE6    The anonymous function is aware of the object which it belongs to therefore you can pass data with the object that s calling it   in this case myButton

[javascript] How can I pass arguments to anonymous functions in JavaScript?

Examples related to javascript

Examples related to jquery