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

 

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

 

[Thomas 'PointedEars' Lahn]

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

 

[Thomas 'PointedEars' Lahn]

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

 

[Thomas 'PointedEars' Lahn]

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]

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
/* ... */
}

 

[DL]

Yes, you did.

                     ^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.

 

[DL]

On May 17, 9:08 pm, Thomas 'PointedEars' Lahn <[email protected]>
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...

 

[Thomas 'PointedEars' Lahn]

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

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

 

[DL]

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

 

[DL]

What's wrong with the following?

function addNewElements(i) {

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

}

Thanks.

 

[Joost Diepenmaat]

What's wrong with the following?

function addNewElements(i) {

var qt = 'qType'+i; // var for dynamic field id and name
if (document.getElementById(qt).value == '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".

 

[DL]

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".

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.getElementById(qt).value // qt being a var here
isn't correct, yes? If so, how do we deal with it?

 

[Thomas 'PointedEars' Lahn]

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

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

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


PointedEars

 

[Joost Diepenmaat]

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.getElementById(qt).value // 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 <select> element
var selectelement = document.getElementById(qt);
// now get the value of the selected <option> in that element
// assuming there's only one
var value = selectelement.options[selectelement.selectedIndex].value

 

[Thomas 'PointedEars' Lahn]

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

Not quite true.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980

However, there is a catch with that in IE. I think I have posted an
explanation/test case before, but I can't seem to find it.


PointedEars

 

[DL]

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.getElementById(qt).value // 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 <select> element
var selectelement = document.getElementById(qt);
// now get the value of the selected <option> in that element
// assuming there's only one
var value = selectelement.options[selectelement.selectedIndex].value

Thanks. But I ran into a problem.

var qt = 'qType'+i;
alert(qt);
// so far so good, it generates a valid value of the SELECT element's
id;

var selectelement = document.getElementById(qt);
alert(selectelement);
// not good, it generates null value, hence, next step also failed.

Could the "pointed ear something" mess up my browser (his/her
javascript expertise is at a level to do something like that)?

 

[Joost Diepenmaat]

Not quite true.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980

However, there is a catch with that in IE. I think I have posted an
explanation/test case before, but I can't seem to find it.

IIRC it didn't work reliably whenever it was that I fully tested it,
and it still doesn't work reliably now, while the selectedIndex has
worked for ages and continuous to work today. I'm also way too lazy to
test it again.

I'm probably overly cautious, but I don't expect anything after DOM-1
to work flawlessly in popular browsers.

 

[Joost Diepenmaat]

Thanks. But I ran into a problem.

var qt = 'qType'+i;
alert(qt);
// so far so good, it generates a valid value of the SELECT element's
id;

var selectelement = document.getElementById(qt);
alert(selectelement);
// not good, it generates null value, hence, next step also failed.

Could the "pointed ear something" mess up my browser (his/her
javascript expertise is at a level to do something like that)?

Are you sure this is what's happening? At the risk of repeating
something someone already mentioned, the best practical way to check
is to use firefox with the firebug extension to check the _actual_ DOM
structure at the time of the execution of the code. your explanation
seems to indicate that there _isn't_ an element with the ID you
expect.

 

[DL]

Thanks.  But I ran into a problem.

Are you sure this is what's happening? At the risk of repeating
something someone already mentioned, the best practical way to check
is to use firefox with the firebug extension to check the _actual_ DOM
structure at the time of the execution of the code. your explanation
seems to indicate that there _isn't_ an element with the ID you
expect.

Ahe. I know where the problem is... maybe...
Here's the code for this portion,
<select id="qType"+i name="qType"+i onchange="doCheckbox('+i
+','+nextrow+')"><option value="YN" selected>Yes/No<option
value="CK">Checkbox<option value="RD">Radio</select>

// silly me, the form wasn't sent, how to expect an element of it?
// now, I only need this SELECT element for the doCheckbox function,
could I re-write the above code to
<select id="qType"+i name="qType"+i
onchange="doCheckbox(this.value,'+i+','+nextrow+')"><option value="YN"
selected>Yes/No<option value="CK">Checkbox<option value="RD">Radio</
select>
to pass the SELECT element's value along?

My test indicates no. Then how?

Unfortunately the other viable alternative of using Firefox with
Firebug isn't available at this point. A company called Aka???
embeded encrypted code (probably to track what's going on with my FF
usage), but that's none of their f??? business and I cursed them
publicly, and they are security experts, now, my FF is hardly working,
let alone the powerful Firebug debugging feature). Trying the lame re-
installation to no avail...

Thanks.