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]

Re: Problem with calling a function within a newly created element

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]

Re: Problem with calling a function within a newly created element

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]

Re: Problem with calling a function within a newly created element

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]

Re: Problem with calling a function within a newly created element

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]

Re: Problem with calling a function within a newly created element

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]

Re: Problem with calling a function within a newly created element

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]

Re: Problem with calling a function within a newly created element

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]

Re: Problem with calling a function within a newly created element

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]

Re: Problem with calling a function within a newly created element

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

[DL]

Re: Problem with calling a function within a newly created element

What's wrong with the following?

function addNewElements( i) {

var qt = 'qType'+i; // var for dynamic field id and name
if (document.getEl ementById(qt).v alue == 'CK')
// the if statement fails with IE7, not tested w/ other browsers
{ ... }

}

Thanks.

[Joost Diepenmaat]

Re: Problem with calling a function within a newly created element

DL <tatata9999@gma il.comwrites:

What's wrong with the following?
>
function addNewElements( i) {
>
var qt = 'qType'+i; // var for dynamic field id and name
if (document.getEl ementById(qt).v alue == 'CK')
// the if statement fails with IE7, not tested w/ other browsers

what do you mean? if(condition) { implication } can't fail. it will
either evaluate condition to be true and then attempt to execute
implication or evaluate condition to be false and not execute
implication, and it can throw exceptions at any stage.

That's assuming the statement is valid code and parses at all.

In any case this looks like valid code, so the probably cause of
whatever it is that's happening is that qt does not refer to the id of
an element having a value attribute of "CK".

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

[DL]

Re: Problem with calling a function within a newly created element

On May 19, 5:38 pm, Joost Diepenmaat <jo...@zeekat.n lwrote:

DL <tatata9...@gma il.comwrites:

What's wrong with the following?

>

function addNewElements( i) {

>

  var qt = 'qType'+i; // var for dynamic field id and name
  if (document.getEl ementById(qt).v alue == 'CK')
// the if statement fails with IE7, not tested w/ other browsers

>
what do you mean? if(condition) { implication } can't fail. it will
either evaluate condition to be true and then attempt to execute
implication or evaluate condition to be false and not execute
implication, and it can throw exceptions at any stage.
>
That's assuming the statement is valid code and parses at all.
>
In any case this looks like valid code, so the probably cause of
whatever it is that's happening is that qt does not refer to the id of
an element having a value attribute of "CK".
>
--
Joost Diepenmaat | blog:http://joost.zeekat.nl/| work:http://zeekat.nl/

ok, thanks, I think now I know what's going on. The 'qType'+i element
is a SELECT element with three options with values of ('YN' | 'CK' |
'RD'). Probaly the syntax of
document.getEle mentById(qt).va lue // qt being a var here
isn't correct, yes? If so, how do we deal with it?

[Thomas 'PointedEars' Lahn]

Re: Problem with calling a function within a newly created element

DL wrote:

[...] 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

^^^ ^^^ pointless, inefficient
||'-- syntax error
begin of string literal --''-- end of string literal

http://jibbering.com/faq/#FAQ4_43

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

[Joost Diepenmaat]

Re: Problem with calling a function within a newly created element

DL <tatata9999@gma il.comwrites:

ok, thanks, I think now I know what's going on. The 'qType'+i element
is a SELECT element with three options with values of ('YN' | 'CK' |
'RD'). Probaly the syntax of
document.getEle mentById(qt).va lue // qt being a var here
isn't correct, yes? If so, how do we deal with it?

You're missing that select elements don't have a value; the options
have.

use something like this:

// get the <selectelemen t
var selectelement = document.getEle mentById(qt);
// now get the value of the selected <optionin that element
// assuming there's only one
var value = selectelement.o ptions[selectelement.s electedIndex].value


--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/