Acess Dynamically Created Elements

Discussion in 'Javascript' started by bradb, Feb 27, 2006.

  1. bradb

    bradb Guest

    Hello,
    I have a textbox with an empty span element (place holder) next to it.
    When the user adds some text to the text box, I create a checkbox in
    the empty span element. When I create the checkbox I create a unique
    ID for the checkbox and associate an OnClick event with it. When I
    proceede to check that checkbox, I get a javascript error stating that
    the id is not defined. This is a dynamically created element, but
    shouldn't the ID of that element still be added to the DOM tree for
    acess via getElementByID() ?

    Any ideas/solutions? More information needed?
    Thanks
    -Brad
    bradb, Feb 27, 2006
    #1
    1. Advertising

  2. bradb

    RobG Guest

    bradb wrote:
    > Hello,
    > I have a textbox with an empty span element (place holder) next to it.
    > When the user adds some text to the text box, I create a checkbox in
    > the empty span element. When I create the checkbox I create a unique
    > ID for the checkbox and associate an OnClick event with it. When I
    > proceede to check that checkbox, I get a javascript error stating that
    > the id is not defined.


    How does the checkbox's onclick event get the id?


    > This is a dynamically created element, but
    > shouldn't the ID of that element still be added to the DOM tree for
    > acess via getElementByID() ?


    Yes.


    >
    > Any ideas/solutions? More information needed?


    Yes and yes - show how you create the element and attach the onclick and
    the onclick script that can't find the id.

    Generally an element gets a reference to itself with 'this', so using its
    ID is not necessary.


    --
    Rob
    RobG, Feb 27, 2006
    #2
    1. Advertising

  3. bradb

    bradb Guest

    This is the function that gets called to create the checkbox...

    function ent_source(num) {
    var str = "source_"+num;
    var id_field = "src_over"+num;
    var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
    onClick='updateField("+id_field+")'>";
    document.getElementById(str).innerHTML = replace;
    }

    And I get an error immediately after clicking the check box saying
    something like:
    Error: src_over10 is not defined
    bradb, Feb 28, 2006
    #3
  4. bradb

    jshanman Guest

    bradb wrote:
    > This is the function that gets called to create the checkbox...
    >
    > function ent_source(num) {
    > var str = "source_"+num;
    > var id_field = "src_over"+num;
    > var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
    > onClick='updateField("+id_field+")'>";
    > document.getElementById(str).innerHTML = replace;
    > }
    >
    > And I get an error immediately after clicking the check box saying
    > something like:
    > Error: src_over10 is not defined


    Its looking for the object or variable src_over10, you want it to pass
    the string "src_over10".

    So change this:
    > var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
    > onClick='updateField("+id_field+")'>";


    To this:
    var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
    onClick='updateField(\'"+id_field+"\')'>";

    Notice the two \' around the "+id_field+" , it's probably hard to see.
    This will send the string "src_over10" to the updateField function,
    which can be used with a getElementById.

    You could also do this:
    var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
    onClick='updateField(this.id)'>";

    Which will do the exact same thing, and save a millisecond or two.

    - JS
    http://www.endeavorpub.com
    jshanman, Feb 28, 2006
    #4
  5. bradb

    bradb Guest

    Thanks! Looks/Works great!
    bradb, Feb 28, 2006
    #5
  6. jshanman wrote:

    > bradb wrote:
    >> This is the function that gets called to create the checkbox...
    >>
    >> function ent_source(num) {
    >> var str = "source_"+num;
    >> var id_field = "src_over"+num;
    >> var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
    >> onClick='updateField("+id_field+")'>";
    >> document.getElementById(str).innerHTML = replace;
    >> }
    >>
    >> And I get an error immediately after clicking the check box saying
    >> something like:
    >> Error: src_over10 is not defined

    >
    > Its looking for the object or variable src_over10, you want it to pass
    > the string "src_over10".


    Not necessarily. It might be that the OP is using the deprecated IE-based
    method of accessing element objects by their respective property of the
    Global Object (or the object that comes before it in the scope chain) in
    the event handler attribute value.

    > So change this:
    >> var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
    >> onClick='updateField("+id_field+")'>";

    >
    > To this:
    > var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
    > onClick='updateField(\'"+id_field+"\')'>";
    >
    > Notice the two \' around the "+id_field+" , it's probably hard to see.
    > This will send the string "src_over10" to the updateField function,
    > which can be used with a getElementById.


    No, it won't. One important aspect of SGML-based attribute value delimiters
    is that they must not occur unescaped (in _markup_ terms) in the attribute
    value, else the attribute value is considered to end there. Here the
    attribute value delimiter is the apostrophe or single quote ('), therefore
    it must not occur in the attribute value.

    The markup parser does not care about the ECMAScript string literal notation
    that might have been used to generate it because it never sees that code,
    including the escape sequence "\'". It only sees "'", and therefore (if we
    assume that num === 10)

    <input type=checkbox id='"src_over10' onClick='updateField('src_over10')'>
    ^ ^
    The trailing "src_over10')'" may be ignored as an unrecognized attribute
    value by the markup parser instead of causing an error. The recognized
    attribute value, 'updateField(', is a syntax error for the script engine
    to which this is passed, though.

    Therefore, one correct variant is:

    var replace = "(Source Over?)<input type='checkbox' id='" + id_field
    + "' onClick='updateField(\"" + id_field + "\")'>";

    (it helps to pretty-print code ;-)) which generated

    ...<input type='checkbox' id='src_over10'
    onClick='updateField("src_over10")'>

    in that case (watch for word wrap).

    However, the target element of an event can be referred to with `this':

    var replace = '(Source Over?)<input type="checkbox"'
    + ' onclick="updateField(this);">';

    which generated

    ...<input type="checkbox" onclick="updateField(this);">

    always.

    You will observe that the generated checkbox does not need an ID at all
    if object references are passed to and used directly in the updateField()
    method, and the checkbox form control is not referred elsewhere.

    The generated '(Source Over?)' substring is... strange, BTW.


    PointedEars
    Thomas 'PointedEars' Lahn, Feb 28, 2006
    #6
    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. Ittay Dror
    Replies:
    0
    Views:
    350
    Ittay Dror
    Apr 19, 2004
  2. msimmons
    Replies:
    0
    Views:
    458
    msimmons
    Jul 16, 2009
  3. Will
    Replies:
    1
    Views:
    99
    lallous
    Jan 23, 2004
  4. Nicholas Couch

    IE6 won't hide dynamically created span elements

    Nicholas Couch, Sep 17, 2004, in forum: Javascript
    Replies:
    20
    Views:
    219
    Thomas 'PointedEars' Lahn
    Sep 26, 2004
  5. Robert Oschler
    Replies:
    1
    Views:
    120
    Robert Oschler
    Sep 3, 2005
Loading...

Share This Page