event handler defined in innerHTML not work

[lendle]

I have defined onclick event handler within the innerHTML property as
following:

var testButton1=oWi n.document.crea teElement("LABE L");
testButton1.inn erHTML="<input type='button' value='xx'
onclick=\"alert ('123')\">";
oLabel.appendCh ild(testButton1 );

the oLabel has already been append to document.body

however, this works in some computer but some are not. I've tried
computer with the same IE patch (6.0.2800.1106, sp1;Q867801;Q82 3353)
and the same windows version (2000 sp4),but this code just have
different behavior.

Is there anything I miss? Thank you!

[Grant Wagner]

lendle wrote:

I have defined onclick event handler within the innerHTML property as
following:

var testButton1=oWi n.document.crea teElement("LABE L");
testButton1.inn erHTML="<input type='button' value='xx'
onclick=\"alert ('123')\">";
oLabel.appendCh ild(testButton1 );

the oLabel has already been append to document.body

You are creating invalid HTML. You are basically generating:

<label><input type='button' value='xx' onclick="alert( '123')"></label>

Which makes no sense at all. A <label> can't contain an <input>. You are
then appending that mess as the child of another label (oLabel), so you
are ending up with some HTML that probably looks something like:

<label><label>< input type='button' value='xx'
onclick="alert( '123')"></label></label>

It appears you want to create a button and put it on document.body. So do
that. Create the button and append it to document.body, NOT to a <label>:

<script type="text/javascript">
var testButton1 = document.create Element('input' );
testButton1.typ e = 'button';
testButton1.val ue = 'xx';
testButton1.onc lick = function() { alert('123'); };
document.body.a ppendChild(test Button1);
</script>

Tested and working in IE 6.0.2800 (pre-XPSP2) and 6.0.2900 (XPSP2),
Firefox 0.9.3 and Opera 7.54.

I'm guessing you took some code you did not understand that created a
<label>, set it's innerHTML and appended the <label> to the previous
element. Now you assume that everytime you create an element, it has to
be a <label>, you have to set it's innerHTML, and you have to append it
to the previous element.

--
Grant Wagner <gw*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

[Michael Winter]

On Tue, 14 Sep 2004 15:43:41 GMT, Grant Wagner
<gw*****@agrico reunited.com> wrote:

[snip]

You are creating invalid HTML. You are basically generating:

<label><input type='button' value='xx' onclick="alert( '123')">
</label>

Which makes no sense at all. A <label> can't contain an <input>.
Yes it can. The LABEL element can contain any inline element, except other
LABELs. The HTML Specification even includes an example with LABEL acting
as a container.

If I remember correctly, it's preferable to use both the for attribute,
and LABEL as a container, to annotate a form control. This allows browsers
that only understand one or the other to function correctly.
You are then appending that mess as the child of another label (oLabel),
so you are ending up with some HTML that probably looks something like:

<label><label>< input type='button' value='xx'
onclick="alert( '123')"></label></label>
If your interpretation of the OP's post is correct, then that certainly is
invalid HTML.
It appears you want to create a button and put it on document.body. So
do that. Create the button and append it to document.body, NOT to a
<label>:

As I said, there's nothing wrong with using a LABEL as a container. It is,
in fact, recommended. Be sure to use for, too.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Grant Wagner]

Michael Winter wrote:

On Tue, 14 Sep 2004 15:43:41 GMT, Grant Wagner
<gw*****@agrico reunited.com> wrote:

You are creating invalid HTML. You are basically generating:

<label><input type='button' value='xx' onclick="alert( '123')">
</label>

Which makes no sense at all. A <label> can't contain an <input>.

Yes it can. The LABEL element can contain any inline element, except other
LABELs. The HTML Specification even includes an example with LABEL acting
as a container.

I didn't have Internet access while I was composing my reply and for some
reason, managed to miss "INPUT" as a "Can Contain" for "LABEL" in my HTML 4.0
Sourcebook. You are of course right.

It appears you want to create a button and put it on document.body. So
do that. Create the button and append it to document.body, NOT to a
<label>:

As I said, there's nothing wrong with using a LABEL as a container. It is,
in fact, recommended. Be sure to use for, too.

And I'd still recommend sticking to document.create Element() and appendChild()
rather than mixing it with innerHTML, especially in a simple example like the
one shown (appending an input to a label, appending that label to some other
element).

--
Grant Wagner <gw*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

[lendle]

Thanks, Grant Wagner,
you are right, I insert my code into the code written by my colleague, and I
insert into wrong place :p
Your code worked, however, if I change my code to

<script language="JavaS cript">
var obj=window.docu ment.createElem ent("form");
obj.innerHTML=" <input type='button' value='xx' onclick=\"alert ('123')\">";
window.document .body.appendChi ld(obj);
</script>

it still not work on IE, but work on Mozilla and Opera.
I wonder if there is any problem about system settings I should check?
Thank you!