Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,033
    Thanks
    0
    Thanked 248 Times in 245 Posts

    adding onclick handler

    im creating a button dynamically on click of a button.
    but the added onclick handler on the created button is not executed.
    i've verified that the handler was added by looking thru the generated HTML using IE's document.documentElement.outerHTML. It's there but when the button is clicked the function showTxt() is not executed. If I save the generated code in a file and executes it, it runs OK.
    What's the reason behind that?

    here's the code:

    function add(){
    myDiv = document.getElementById("div");
    obj = document.createElement("input");
    obj.type = "button";
    obj.name = "btnNew";
    obj.id = "btn1";
    obj.value = "New Row";
    obj.onclick = "showTxt('test')";
    myDiv.appendChild(obj);
    //workaround below
    //document.getElementById("btn1").onclick=function(){showTxt('test')};
    }

    function showTxt(txt){
    alert(txt);
    }

    I've added a workaround which is commented above but just wondering why obj.onclick statement doesnt work.

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Location
    self.location
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try omitting the quotes:

    obj.onclick = showTxt('test');

    ...

    PLEASE NOTE: If the above still doesn't work, it's because normally when you register an event-handler this way (outside of a tag), JS syntax requires that the parentheses which normally indicate a function or a method be omitted. Example:

    obj.onclick = showTxt

    This would be correct and normally works, but in this particular case it raises the issue of how to pass the variable into the function then... I've wondered about this myself - hopefully somebody else here has an answer.

  • #3
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    The answer is normally to pass the data to the object on the constructor, store it in the new object, and then reference it whenever you need it:

    Code:
    <HTML><BODY>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    but=0;
    function add(what){
    myDiv = document.getElementById("div");
    obj = document.createElement("input");
    obj.type = "button";
    obj.name = "btnNew";
    obj.id = "btn1";
    obj.value = "New Row "+ ++but;
    obj.text = what + but;
    obj.onclick = showTxt;
    myDiv.appendChild(obj);
    }
    function showTxt(){
    alert(this.text);
    }
    //-->
    </SCRIPT> 
    <A HREF="javascript:add('Text of your choice for button ')">add</A>
    <div id="div">&nbsp;</div>
    </BODY>
    </HTML>
    (with java script as javascript without the space)

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,033
    Thanks
    0
    Thanked 248 Times in 245 Posts
    tnx for your replies.
    i just put the sample functions for the sake of simple illustration but the actual function (which has 3 arguments) to be added on the onclick handler is called by several functions and event handlers, so modifying the existing function is not the option. So maybe I'll stick with the workaround I implemented.
    Tnx again, i appreciate your help

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    185
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem is that .onclick and all other event handlers take a function reference ( onclick=showTxt; ) , not function call ( onclick=showTxt('abc') ). So you can't pass arguments. Event handlers always get one argument, an event object - except for in IE where there is no argument, since it has one global event object (window.event).

    It's the same when you use event handlers in an HTML tag, as in

    <a href="" onclick="showTxt('abc'); return false;">....</a>

    What actually happens is that the browser creates an anonymous function that looks somewhat like this:

    function onclick(event) {
    showTxt('abc');
    return false;
    }

    If you use a variable in the above:

    <a href="" onclick="showTxt(myVar); return false;">....</a>

    it looks for a global variable named "myVar."

    function onclick(event) {
    showTxt(myVar);
    return false;
    }

    So if you need to pass different arguments to the event handler, you do what piglet suggested, assign them as properties to the object so you can reference them from that object using "this.myPropName".

  • #6
    New to the CF scene
    Join Date
    Jul 2002
    Location
    Oxford, England
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    obj.onclick = function(){showTxt('test')}

    coxy

  • #7
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi coxy,

    Yes - that was the workaround which they were trying not to use!

    //workaround below
    //document.getElementById("btn1").onclick=function(){showTxt('test')};

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Since when is wrapping an HTML event handler function call in a Function object a 'workaround'? That's what the browser does, when you do the assignment in HTML....

  • #9
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have the same problem, but what I did was slightly different:

    Code:
    //one of two ways
    //#1
    obj.onclick = tmpfnc
    function tmpfnc () {
    realthing (par1, par2, par3)
    }
    //#2
    obj.onclick = realthing
    function realthing () {
    if (arguments.length != 0) {
    //act on arguments, calling them as arguments[0], [1] and [2]
    //respectively
    /*dostuff*/
    } else {
    //assume arguments and act on that
    /*dostuff*/
    }
    }
    But that's assuming that all of your links use the same stuff...


    Guardian
    *just a thought*

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,033
    Thanks
    0
    Thanked 248 Times in 245 Posts
    it works now with this code:

    Code:
    function add(){ 
    myDiv = document.getElementById("div"); 
    obj = document.createElement("input"); 
    obj.type = "button"; 
    obj.name = "btnNew"; 
    obj.value = "New Row"; 
    obj.onclick = function(){showTxt('test')};
    myDiv.appendChild(obj); 
    } 
    
    function showTxt(txt){ 
    alert(txt); 
    }
    Since when is wrapping an HTML event handler function call in a Function object a 'workaround'? That's what the browser does, when you do the assignment in HTML....
    i consider

    document.getElementById("btn1").onclick=function(){showTxt('test')};

    as a "workaround" since instead of directly wrapping onclick handler to the object returned by document.createElement("input"), i have to put an id attribute and using

    document.getElementById("btn1").onclick=function(){showTxt('test')};

    ONLY after that created element has been appended to its parent element.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    glenn...

    Didn't recommend:

    document.getElementById("btn1").onclick=function(){showTxt('test')};

    ..but coxy's terse:

    obj.onclick = function(){showTxt('test')}

    approach. Take a look in there:

    <html>
    <head>
    <title>untitled</title>
    </head>
    <body>
    <a href="#" onclick="alert('is this wrapped?')">test</a>
    <script type="text/javascript" language="javascript">

    alert(document.links[0].onclick);
    alert(typeof document.links[0].onclick);

    </script>
    </body>
    </html>


  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,033
    Thanks
    0
    Thanked 248 Times in 245 Posts
    didn't say you recommended it, i just explained why i called that solution a "workaround"

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Oops, confused you with piglet - who compared the correct technique with what you had already termed (accurately) as a 'workaround'. cheers

    adios

  • #14
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    WTF are you talking about adios?

    ...piglet - who compared the correct technique with what you had already termed (accurately) as a 'workaround'
    I was comparing this from coxy:

    obj.onclick = function(){showTxt('test')}


    with this from glenngv

    //workaround below
    //document.getElementById("btn1").onclick=function(){showTxt('test')};


    I was comparing the assignment of an anonymous function to the object with the assignment of an anonymous function to the object which glenngv called his 'workaround'.

  • #15
    New Coder
    Join Date
    Feb 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I need to create a variable number of rows (with two data tags) in an html table, based on a variable evaluated in javascript code. The add() function given in this thread, somewhat solves this problem of mine, but not completely. As it can create a variable number of elements, but not variable number of rows in a table.

    I am wondering if it is possible to create a variable number of rows with two data elements in an html table from a javascript function?

    Thanks a lot in advance!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •