Problem with calling a function within a newly created element

[DL]

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.innerHT ML ='\<input type="text" name=q'+i+' size="60"\>;Typ e:
\<select name=qType'+i+ 'onchange="aler t(i);"\>\<optio n value="YN"
selected\>Yes/No\<option value="CK"\>Che ckbox\</select\><br\>';

Thanks.

[DL]

On May 17, 6:52*pm, DL <tatata9...@gma il.comwrote:

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.innerHT ML ='\<input type="text" name=q'+i+' size="60"\>;Typ e:
\<select name=qType'+i+ 'onchange="aler t(i);"\>\<optio n value="YN"
selected\>Yes/No\<option value="CK"\>Che ckbox\</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.

[Thomas 'PointedEars' Lahn]

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.innerHT ML ='\<input type="text" name=q'+i+' size="60"\>;Typ e:

^start end^ ^start

\<select name=qType'+i+ 'onchange="aler t(i);"\>\<optio n value="YN"

end^ ^start[1] ^^^[2]

selected\>Yes/No\<option value="CK"\>Che ckbox\</select\><br\>';

^end

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

<select name=qType42onc hange="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"o nchange="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 bugRiddenCrashP ronePieceOfJunk = (
navigator.userA gent.indexOf('M SIE 5') != -1
&& navigator.userA gent.indexOf('M ac') != -1
) // Plone, register_functi on.js:16

[Thomas 'PointedEars' Lahn]

DL wrote:

On May 17, 6:52 pm, DL <tatata9...@gma il.comwrote:

>newTRc1.innerH TML ='\<input type="text" name=q'+i+' size="60"\>;Typ e:
\<select name=qType'+i+ 'onchange="aler t(i);"\>\<optio n value="YN"
selected\>Ye s/No\<option value="CK"\>Che ckbox\</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]

Thomas 'PointedEars' Lahn wrote:

DL wrote:

>On May 17, 6:52 pm, DL <tatata9...@gma il.comwrote:

>>newTRc1.inner HTML ='\<input type="text" name=q'+i+' size="60"\>;Typ e:
\<select name=qType'+i+ 'onchange="aler t(i);"\>\<optio n value="YN"
selected\>Y es/No\<option value="CK"\>Che ckbox\</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

[DL]

On May 17, 9:08*pm, Thomas 'PointedEars' Lahn <PointedE...@we b.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.innerHT ML ='\<input type="text" name=q'+i+' size="60"\>;Typ e:

* * * * * * * * * * *^start * * * * * * * * *end^ * ^start\<select name=qType'+i+ 'onchange="aler t(i);"\>\<optio n value="YN"

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

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

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

* <select name=qType42onc hange="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"o nchange="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="doChe ckbox('+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
/* ... */
}

[DL]

On May 17, 9:47*pm, DL <tatata9...@gma il.comwrote:

On May 17, 9:08*pm, Thomas 'PointedEars' Lahn <PointedE...@we b.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.innerHT ML ='\<input type="text" name=q'+i+' size="60"\>;Typ e:

* * * * * * * * * * *^start * * * * * * * * *end^ * ^start\<select name=qType'+i+ 'onchange="aler t(i);"\>\<optio n value="YN"

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

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

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

* <select name=qType42onc hange="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"o nchange="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="doChe ckbox('+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.getEl ementById('qTyp e'+i).value = 'CK') {
var TBL = document.getEle mentById('tbl') ;
...
}
I got "document.getEl ementById(...)" is null or an object err but if I
comment out the IF line
if (document.getEl ementById('qTyp e'+i).value = 'CK')
then the code works but I lose the logic of adding the checkbox only
when type is checkbox. Why?

Thanks.

[DL]

On May 17, 10:35*pm, DL <tatata9...@gma il.comwrote:

On May 17, 9:47*pm, DL <tatata9...@gma il.comwrote:

On May 17, 9:08*pm, Thomas 'PointedEars' Lahn <PointedE...@we b.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.innerHT ML ='\<input type="text" name=q'+i+' size="60"\>;Typ e:

* * * * * * * * * * *^start * * * * * * * * *end^ * ^start\<select name=qType'+i+ 'onchange="aler t(i);"\>\<optio n value="YN"

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

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

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

* <select name=qType42onc hange="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"o nchange="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="doChe ckbox('+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.getEl ementById('qTyp e'+i).value = 'CK') {
* *var TBL = document.getEle mentById('tbl') ;
* *...}

I got "document.getEl ementById(...)" is null or an object err but if I
comment out the IF line
if (document.getEl ementById('qTyp e'+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...

[Thomas 'PointedEars' Lahn]

DL wrote:

On May 17, 10:35 pm, DL <tatata9...@gma il.comwrote:

>If my code looks like the following,
if (document.getEl ementById('qTyp e'+i).value = 'CK') {
var TBL = document.getEle mentById('tbl') ;
...}

I got "document.getEl ementById(...)" is null or an object err but if I

^^^^^^^^^^^^
"... or _not_ an object"

>comment out the IF line
if (document.getEl ementById('qTyp e'+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.getEle mentById('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

[DL]

On May 18, 7:29*am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

>

comment out the IF line
if (document.getEl ementById('qTyp e'+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.getEle mentById('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.getEle mentById(''qTyp e'+i+'').value