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]

Re: event handler defined in innerHTML not work

lendle wrote:
[color=blue]
> 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[/color]

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 <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

[Michael Winter]

Re: event handler defined in innerHTML not work

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

[snip]
[color=blue]
> 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>.[/color]

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.
[color=blue]
> 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>[/color]

If your interpretation of the OP's post is correct, then that certainly is
invalid HTML.
[color=blue]
> 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>:[/color]

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]

Re: event handler defined in innerHTML not work

Michael Winter wrote:
[color=blue]
> On Tue, 14 Sep 2004 15:43:41 GMT, Grant Wagner
> <gwagner@agrico reunited.com> wrote:
>[color=green]
> > 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>.[/color]
>
> 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.[/color]

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.
[color=blue][color=green]
> > 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>:[/color]
>
> 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.[/color]

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 <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

[lendle]

Re: event handler defined in innerHTML not work

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!