Acess Dynamically Created Elements

[bradb]

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

 

[RobG]

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.

 

[bradb]

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

 

[jshanman]

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

 

[bradb]

Thanks! Looks/Works great!

 

[Thomas 'PointedEars' Lahn]

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:

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