Dynamic onclick event

Discussion in 'Javascript' started by getsanjay.sharma@gmail.com, May 13, 2007.

  1. Guest

    Is there any way I can attach a function dynamically which takes some
    parameters ?

    <html>
    <head>
    <script>
    doSomething = function(x)
    {
    alert(x);
    }

    reattach = function()
    {
    // doesn't work
    document.getElementById("btnOne").onclick = doSomething(200);

    // neither does this
    document.getElementById("btnTwo").addEventListener("onclick",
    doSomething(200), true);
    }
    </script>
    </head>
    <body>
    <form>
    <input type="button" name="btnOne" id="btnOne"
    onclick="doSomething(2)" value="One" />
    <br />
    <br />
    <input type="button" name="btnTwo" id="btnTwo" onclick="reattach()"
    value="Dynamic" />
    </form>
    </body>
    </html>

    By using the first syntax I just end up executing the function.

    By using the addEventListener function I get some weird error like:
    "uncaught exception: [Exception... "Could not convert JavaScript
    argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"
    location: "JS frame ::"

    Any help is greatly appreciated.
    , May 13, 2007
    #1
    1. Advertising

  2. ASM Guest

    a écrit :
    > Is there any way I can attach a function dynamically which takes some
    > parameters ?
    >
    > <html>
    > <head>
    > <script>
    > doSomething = function(x)
    > {
    > alert(x);
    > }
    >
    > reattach = function()
    > {
    > // doesn't work
    > document.getElementById("btnOne").onclick = doSomething(200);


    Perhaps :
    document.getElementById("btnOne").onclick = 'doSomething(200)';

    Certainly :
    document.getElementById("btnOne").onclick = function() {
    doSomething(200);
    }

    or :
    document.getElementById("btnOne").onclick=Function('doSomething(200)');


    May be :
    document.getElementById("btnTwo").addEventListener("onclick",
    "doSomething(200)",
    true);
    }


    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, May 13, 2007
    #2
    1. Advertising

  3. Guest

    > Perhaps :
    > document.getElementById("btnOne").onclick = 'doSomething(200)';
    >
    > Certainly :
    > document.getElementById("btnOne").onclick = function() {
    > doSomething(200);
    > }
    >
    > or :
    > document.getElementById("btnOne").onclick=Function('doSomething(200)');
    >
    > May be :
    > document.getElementById("btnTwo").addEventListener("onclick",
    > "doSomething(200)",
    > true);
    >
    > }


    What if a variable is used inside the function instead of a literal ?
    Like doSomething(myVar) ? I guues I am facing some scoping problems
    when using your second approach.

    var i = 100;
    document.getElementById("btnOne").onclick = function()
    { doSomething(i); }

    For some weird reason, it can't read the value of i inside the
    function scope and it always shows blank. Then I tried using:

    var i = 100;
    document.getElementById("btnOne").onclick = function(i)
    { doSomething(i); }

    The above approach always gives 'i' the value of 'document.mouseevent'
    for no good reason.

    And the attachEventListener method as usual gives me this error:
    "uncaught exception: [Exception... "Could not convert JavaScript
    argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"
    location: "JS frame ::"

    Any suggestions?
    , May 13, 2007
    #3
  4. RobG Guest

    On May 14, 5:31 am, wrote:
    > > Perhaps :
    > > document.getElementById("btnOne").onclick = 'doSomething(200)';

    >
    > > Certainly :
    > > document.getElementById("btnOne").onclick = function() {
    > > doSomething(200);
    > > }

    >
    > > or :
    > > document.getElementById("btnOne").onclick=Function('doSomething(200)');

    >
    > > May be :
    > > document.getElementById("btnTwo").addEventListener("onclick",
    > > "doSomething(200)",
    > > true);

    >
    > > }

    >
    > What if a variable is used inside the function instead of a literal ?
    > Like doSomething(myVar) ? I guues I am facing some scoping problems
    > when using your second approach.
    >
    > var i = 100;
    > document.getElementById("btnOne").onclick = function()
    > { doSomething(i); }
    >
    > For some weird reason, it can't read the value of i inside the
    > function scope and it always shows blank. Then I tried using:
    >
    > var i = 100;
    > document.getElementById("btnOne").onclick = function(i)
    > { doSomething(i); }
    >
    > The above approach always gives 'i' the value of 'document.mouseevent'
    > for no good reason.
    >
    > And the attachEventListener method as usual gives me this error:
    > "uncaught exception: [Exception... "Could not convert JavaScript
    > argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"
    > location: "JS frame ::"
    >
    > Any suggestions?


    You have discovered a number of things in regard to events and
    closures. A good introductoin to events is at Quirskmode, and to
    closures in the FAQ notes (see links below):

    Quirksmode: Introduction to events (there are many pages, read them
    all):
    <URL: http://www.quirksmode.org/js/introevents.html >

    Closures (rather long and detailed but it's all good stuff):
    <URL: http://www.jibbering.com/faq/faq_notes/closures.html >


    --
    Rob
    RobG, May 14, 2007
    #4
  5. ASM Guest

    a écrit :
    >
    > What if a variable is used inside the function instead of a literal ?
    > Like doSomething(myVar) ? I guues I am facing some scoping problems
    > when using your second approach.
    >
    > var i = 100;
    > document.getElementById("btnOne").onclick = function()
    > { doSomething(i); }


    > Any suggestions?



    var i = 200;
    document.getElementById("btnOne").onclick=Function('doSomething("'+i+'")');


    <html>
    <script type="text/javascript">
    function $(id) { return document.getElementById(id); }
    function addOnClick(){
    for(var i=1; i<=5; i++) {
    $('field'+i).onclick = Function('alarm("field'+i+'")');
    $('field'+i).style.cursor = 'pointer';
    }
    }
    function alarm(txt) {
    alert('Yes it is the field :\n\t\t\t'+txt);
    alert('Verification : '+$(txt).id);
    }
    onload = addOnClick;
    </script>
    <p id="field1"> click 1 </p>
    <p id="field2"> click 2 </p>
    <p id="field3"> click 3 </p>
    <p id="field4"> click 4 </p>
    <p id="field5"> click 5 </p>
    </html>

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, May 14, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. RA
    Replies:
    5
    Views:
    15,483
    =?Utf-8?B?YW1pcm1pcmE=?=
    Apr 1, 2005
  2. JerryG
    Replies:
    0
    Views:
    412
    JerryG
    Dec 20, 2005
  3. bob
    Replies:
    3
    Views:
    174
  4. Dipin
    Replies:
    4
    Views:
    124
  5. Replies:
    2
    Views:
    240
Loading...

Share This Page