Problem with calling a function within a newly created element

Hi,

What I wanted to do is to call a function from a newly created
element. But it stumbled me.

Here's the line that references the newly created element and I used
the alert function for debugging for now. Did I mess up all these
quotes?

// once again this is the key line of code, problem area, disregard
var i etc...
newTRc1.innerHTML ='\<input type="text" name=q'+i+' size="60"\>;Type:
\<select name=qType'+i+ 'onchange="alert(i);"\>\<option value="YN"
selected\>Yes/No\<option value="CK"\>Checkbox\</select\><br\>';

Thanks.

On May 17, 6:52*pm, DL <tatata9... (AT) gmail (DOT) com> wrote:

Hi,

What I wanted to do is to call a function from a newly created
element. * But it stumbled me.

Here's the line that references the newly created element and I used
the alert function for debugging for now. * Did I mess up all these
quotes?

// once again this is the key line of code, problem area, disregard
var i etc...
newTRc1.innerHTML ='\<input type="text" name=q'+i+' size="60"\>;Type:
\<select name=qType'+i+ 'onchange="alert(i);"\>\<option value="YN"
selected\>Yes/No\<option value="CK"\>Checkbox\</select\><br\>';

Thanks.

Ok, so, it looks like I wasn't thinking, the Event handler within the
newly created element hasn't been loaded by a browser, hence, no
action upon such an event. Yes? And if so, how do we solve this
problem? Or another better approach to achieve the same goal?

Thanks.

DL wrote:

What I wanted to do is to call a function from a newly created
element. But it stumbled me.

Here's the line that references the newly created element and I used
the alert function for debugging for now. Did I mess up all these
quotes?

Yes, you did.

// once again this is the key line of code, problem area, disregard
var i etc...
newTRc1.innerHTML ='\<input type="text" name=q'+i+' size="60"\>;Type:
^start end^ ^start
\<select name=qType'+i+ 'onchange="alert(i);"\>\<option value="YN"
end^ ^start[1] ^^^[2]
selected\>Yes/No\<option value="CK"\>Checkbox\</select\><br\>';
^end

There. Because you have not properly delimited all your attribute values
[^1], you will generate

<select name=qType42onchange="alert(i);">

if i == 42. What do you expect of the user agent to do here?

While delimiting all attribute values with " --

<select name="qType42"onchange="alert(i);">

-- or including the missing whitespace --

<select name=qType42 onchange="alert(i);">

-- or do both of them would be a quick fix, I strongly suggest you stop
cooking proprietary (innerHTML) tag soup and start using DOM Level 2 creator
and mutator methods instead. With a few user-defined wrappers they can be
even more efficient to use than what you have now.

http://www.w3.org/TR/DOM-Level-2-Core/

Furthermore, if you generate the identifier of `i' instead of the current
value of `i' [^2], it will be resolved on execution of the event handler
attribute value, which is probably not what you want here.

BTW, `<' and `>' do not need to be escaped in string literals; `</' (ETAGO)
should be escaped as `<\/' if the source code is within an HTML document.


PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

DL wrote:

On May 17, 6:52 pm, DL <tatata9... (AT) gmail (DOT) com> wrote:
newTRc1.innerHTML ='\<input type="text" name=q'+i+' size="60"\>;Type:
\<select name=qType'+i+ 'onchange="alert(i);"\>\<option value="YN"
selected\>Yes/No\<option value="CK"\>Checkbox\</select\><br\>';

Ok, so, it looks like I wasn't thinking, the Event handler within the
newly created element hasn't been loaded by a browser, hence, no
action upon such an event. Yes?

Not quite. The event handler exists before, as native code. The event
handler attribute value is a string of characters that is passed on to the
script engine which uses it to generate a function (the primary event
listener) that is called by the event handler on event.

However, as the generated code lacks the `onchange' attribute due to missing
separation of the relevant HTML code from the rest here, there is nothing to
pass on to the script engine, and no primary event listener is being created
that could be called on event.

Or another better approach to achieve the same goal?

See my other followup.


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

Thomas 'PointedEars' Lahn wrote:

DL wrote:
On May 17, 6:52 pm, DL <tatata9... (AT) gmail (DOT) com> wrote:
newTRc1.innerHTML ='\<input type="text" name=q'+i+' size="60"\>;Type:
\<select name=qType'+i+ 'onchange="alert(i);"\>\<option value="YN"
selected\>Yes/No\<option value="CK"\>Checkbox\</select\><br\>';
Ok, so, it looks like I wasn't thinking, the Event handler within the
newly created element hasn't been loaded by a browser, hence, no
action upon such an event. Yes?

Not quite. The event handler exists before, as native code. The event
handler attribute value is a string of characters that is passed on to the
script engine which uses it to generate a function (the primary event
^^^^^^^^^^^

"to create" is the better, less confusing verb here.

listener) that is called by the event handler on event.

PointedEars

On May 17, 9:08*pm, Thomas 'PointedEars' Lahn <PointedE... (AT) web (DOT) de>
wrote:

DL wrote:
What I wanted to do is to call a function from a newly created
element. * But it stumbled me.

Here's the line that references the newly created element and I used
the alert function for debugging for now. * Did I mess up all these
quotes?

Yes, you did.

// once again this is the key line of code, problem area, disregard
var i etc...
newTRc1.innerHTML ='\<input type="text" name=q'+i+' size="60"\>;Type:

* * * * * * * * * * *^start * * * * * * * * *end^ * ^start> \<select name=qType'+i+ 'onchange="alert(i);"\>\<option value="YN"

* * * * * * * * * end^ * *^start[1] * * * ^^^[2]> selected\>Yes/No\<option value="CK"\>Checkbox\</select\><br\>';

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *^end

There. *Because you have not properly delimited all your attribute values
[^1], you will generate

* <select name=qType42onchange="alert(i);"

if i == 42. *What do you expect of the user agent to do here?

While delimiting all attribute values with " --

* <select name="qType42"onchange="alert(i);"

-- or including the missing whitespace --

* <select name=qType42 onchange="alert(i);"

-- or do both of them would be a quick fix, I strongly suggest you stop
cooking proprietary (innerHTML) tag soup and start using DOM Level 2 creator
and mutator methods instead. *With a few user-defined wrappers they can be
even more efficient to use than what you have now.

http://www.w3.org/TR/DOM-Level-2-Core/

Furthermore, if you generate the identifier of `i' instead of the current
value of `i' [^2], it will be resolved on execution of the event handler
attribute value, which is probably not what you want here.

BTW, `<' and `>' do not need to be escaped in string literals; `</' (ETAGO)
should be escaped as `<\/' if the source code is within an HTML document.

Ok, many thanks. Now, I changed part of it to
... <select name=qType'+i+' onchange="doCheckbox('+i+')"><option ...

This event handler is now recognized by my browser (IE7), however, I'm
getting "Object expected" error, fyi, the doCheckbox function (as a
sub function) looks this:

function doCheckbox(i) {
// debug
alert(i);
// add a new checkbox here
/* ... */
}

On May 17, 9:47*pm, DL <tatata9... (AT) gmail (DOT) com> wrote:

On May 17, 9:08*pm, Thomas 'PointedEars' Lahn <PointedE... (AT) web (DOT) de
wrote:





DL wrote:
What I wanted to do is to call a function from a newly created
element. * But it stumbled me.

Here's the line that references the newly created element and I used
the alert function for debugging for now. * Did I mess up all these
quotes?

Yes, you did.

// once again this is the key line of code, problem area, disregard
var i etc...
newTRc1.innerHTML ='\<input type="text" name=q'+i+' size="60"\>;Type:

* * * * * * * * * * *^start * * * * * * * * *end^ * ^start> \<select name=qType'+i+ 'onchange="alert(i);"\>\<option value="YN"

* * * * * * * * * end^ * *^start[1] * * * ^^^[2]> selected\>Yes/No\<option value="CK"\>Checkbox\</select\><br\>';

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *^end

There. *Because you have not properly delimited all your attribute values
[^1], you will generate

* <select name=qType42onchange="alert(i);"

if i == 42. *What do you expect of the user agent to do here?

While delimiting all attribute values with " --

* <select name="qType42"onchange="alert(i);"

-- or including the missing whitespace --

* <select name=qType42 onchange="alert(i);"

-- or do both of them would be a quick fix, I strongly suggest you stop
cooking proprietary (innerHTML) tag soup and start using DOM Level 2 creator
and mutator methods instead. *With a few user-defined wrappers they can be
even more efficient to use than what you have now.

http://www.w3.org/TR/DOM-Level-2-Core/

Furthermore, if you generate the identifier of `i' instead of the current
value of `i' [^2], it will be resolved on execution of the event handler
attribute value, which is probably not what you want here.

BTW, `<' and `>' do not need to be escaped in string literals; `</' (ETAGO)
should be escaped as `<\/' if the source code is within an HTML document..

Ok, many thanks. *Now, I changed part of it to
... <select name=qType'+i+' onchange="doCheckbox('+i+')"><option ...

This event handler is now recognized by my browser (IE7), however, I'm
getting "Object expected" error, fyi, the doCheckbox function (as a
sub function) looks this:

function doCheckbox(i) {
* // debug
* *alert(i);
* // add a new checkbox here
* /* ... */



}- Hide quoted text -

- Show quoted text -- Hide quoted text -

- Show quoted text -

ok, I've fixed this problem by making the doCheckbox() a separate
function . Now,
with the doCheckbox() function,

If my code looks like the following,
if (document.getElementById('qType'+i).value = 'CK') {
var TBL = document.getElementById('tbl');
...
}
I got "document.getElementById(...)" is null or an object err but if I
comment out the IF line
if (document.getElementById('qType'+i).value = 'CK')
then the code works but I lose the logic of adding the checkbox only
when type is checkbox. Why?

Thanks.

On May 17, 10:35*pm, DL <tatata9... (AT) gmail (DOT) com> wrote:

On May 17, 9:47*pm, DL <tatata9... (AT) gmail (DOT) com> wrote:





On May 17, 9:08*pm, Thomas 'PointedEars' Lahn <PointedE... (AT) web (DOT) de
wrote:

DL wrote:
What I wanted to do is to call a function from a newly created
element. * But it stumbled me.

Here's the line that references the newly created element and I used
the alert function for debugging for now. * Did I mess up all these
quotes?

Yes, you did.

// once again this is the key line of code, problem area, disregard
var i etc...
newTRc1.innerHTML ='\<input type="text" name=q'+i+' size="60"\>;Type:

* * * * * * * * * * *^start * * * * * * * * *end^ * ^start> \<select name=qType'+i+ 'onchange="alert(i);"\>\<option value="YN"

* * * * * * * * * end^ * *^start[1] * * * ^^^[2]> selected\>Yes/No\<option value="CK"\>Checkbox\</select\><br\>';

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *^end

There. *Because you have not properly delimited all your attribute values
[^1], you will generate

* <select name=qType42onchange="alert(i);"

if i == 42. *What do you expect of the user agent to do here?

While delimiting all attribute values with " --

* <select name="qType42"onchange="alert(i);"

-- or including the missing whitespace --

* <select name=qType42 onchange="alert(i);"

-- or do both of them would be a quick fix, I strongly suggest you stop
cooking proprietary (innerHTML) tag soup and start using DOM Level 2 creator
and mutator methods instead. *With a few user-defined wrappers they can be
even more efficient to use than what you have now.

http://www.w3.org/TR/DOM-Level-2-Core/

Furthermore, if you generate the identifier of `i' instead of the current
value of `i' [^2], it will be resolved on execution of the event handler
attribute value, which is probably not what you want here.

BTW, `<' and `>' do not need to be escaped in string literals; `</' (ETAGO)
should be escaped as `<\/' if the source code is within an HTML document.

Ok, many thanks. *Now, I changed part of it to
... <select name=qType'+i+' onchange="doCheckbox('+i+')"><option ...

This event handler is now recognized by my browser (IE7), however, I'm
getting "Object expected" error, fyi, the doCheckbox function (as a
sub function) looks this:

function doCheckbox(i) {
* // debug
* *alert(i);
* // add a new checkbox here
* /* ... */

}- Hide quoted text -

- Show quoted text -- Hide quoted text -

- Show quoted text -

ok, I've fixed this problem by making the doCheckbox() a separate
function . *Now,
with the doCheckbox() function,

If my code looks like the following,
if (document.getElementById('qType'+i).value = 'CK') {
* *var TBL = document.getElementById('tbl');
* *...}

I got "document.getElementById(...)" is null or an object err but if I
comment out the IF line
if (document.getElementById('qType'+i).value = 'CK')
then the code works but I lose the logic of adding the checkbox only
when type is checkbox. *Why?

Thanks.- Hide quoted text -

Ahe, now I think I know why the above IF statement failed because it's
not a simple value, the SELECT element may multiple values...

DL wrote:

On May 17, 10:35 pm, DL <tatata9... (AT) gmail (DOT) com> wrote:
If my code looks like the following,
if (document.getElementById('qType'+i).value = 'CK') {
var TBL = document.getElementById('tbl');
...}

I got "document.getElementById(...)" is null or an object err but if I
^^^^^^^^^^^^

"... or _not_ an object"

comment out the IF line
if (document.getElementById('qType'+i).value = 'CK')
then the code works but I lose the logic of adding the checkbox only
when type is checkbox. Why?

Ahe, now I think I know why the above IF statement failed because it's
not a simple value, the SELECT element may multiple values...

No, it is because document.getElementById('qType'+i) cannot be evaluated to
an object reference, as the error message says. So either there exists no
element with that ID (yet), or your markup is not Valid.

You have also assigned a value (`=') when you wanted a comparison (`==' or
`===').

BTW, full-quoting hundreds of unnecessary lines is not going to encourage
people to read your postings, much less to reply to them.

http://jibbering.com/faq/


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

On May 18, 7:29*am, Thomas 'PointedEars' Lahn <PointedE... (AT) web (DOT) de>
wrote:

comment out the IF line
if (document.getElementById('qType'+i).value = 'CK')
then the code works but I lose the logic of adding the checkbox only
when type is checkbox. *Why?

Ahe, now I think I know why the above IF statement failed because it's
not a simple value, the SELECT element may multiple values...

No, it is because document.getElementById('qType'+i) cannot be evaluated to
an object reference, as the error message says. *So either there exists no
element with that ID (yet), or your markup is not Valid.

You have also assigned a value (`=') when you wanted a comparison (`==' or
`===').

BTW, full-quoting hundreds of unnecessary lines is not going to encourage
people to read your postings, much less to reply to them.

http://jibbering.com/faq/

Thanks a lot. So, how do I reference a dynamic ID? Let's continue to
use this case, the following line attempts to put a string literal
inside a simgle quotes then add the var i value then single quote the
whole "thing", won't work
document.getElementById(''qType'+i+'').value