DOM/HTML Button Element

[Howard Jess]

[This was submitted as a bug to Opera; I'm posting it here, after not
seeing mention of this in a newsgroup search]:

In HTML 4.01, a <button> element can take 1 of 3 types:

type=submit (default)
type=reset
type=button

The Javascript to create a button element dynamically is

elem = document.createElement('button');
elem.type = 'reset';

Running this code in Opera 7.54 gives the message:

"DOMException: NO_MODIFICATION_ALLOWED_ERR"

My intuition is that the official Opera.com response will be that this
is as required by the DOM spec, which lists "type" as a readonly property.
And I'll give you that, but how can the spec be correct? It refers to the
HTML 4.01 spec, which lists the 3 possible values for type; but the DOM
interface shows no other method for altering the value of type.

In other words, how do I use Javascript to create the equivalent of either

<button name="rset" type="reset">Reset Button</button>
or
<button name="push" type="button">Push Button</button>

??

For what it's worth, Mozilla makes the "type" property read/write; and
IE requires its own bizarre argument to createElement (as:

elem = document.createElement('<button type="reset" value="Reset">Reset</button>')


hj

 

[Michael Winter]

[This was submitted as a bug to Opera;

It isn't a bug. Just some oddness in the DOM specification.

[snip]

In HTML 4.01, a <button> element can take 1 of 3 types:

Unfortunately, the BUTTON element is all but useless due to IE's woeful
inability to use it properly. You'd be better off using the INPUT
element, which has a modifiable type property.

[snip]

My intuition is that the official Opera.com response will be that this
is as required by the DOM spec, which lists "type" as a readonly property.
And I'll give you that, but how can the spec be correct?

You should ask that on the W3C mailing lists.

Notice that in DOM 2 HTML, the INPUT element's type attribute was
modified from read-only to read/write, but the BUTTON element was not.
Either it was overlooked, or there was a reason.

[snip]

Mike

 

[Howard Jess]

[This was submitted as a bug to Opera;

It isn't a bug. Just some oddness in the DOM specification.

Right; the "oddness" makes dynamicly created button elements a lot
less useful, though; and in Mozilla this "oddness" is ignored (type
is read/write), and in Safari, although the property isn't directly
modifiable, setAttribute('type',...) has the expected effect.

[snip]

In HTML 4.01, a <button> element can take 1 of 3 types:

Unfortunately, the BUTTON element is all but useless due to IE's woeful
inability to use it properly. You'd be better off using the INPUT
element, which has a modifiable type property.

Yes and no. If you see you're running in IE (by detecting its "woeful"
behavior, of course), there are measures you can take.

You should ask that on the W3C mailing lists.

OK, good advice.

Notice that in DOM 2 HTML, the INPUT element's type attribute was
modified from read-only to read/write, but the BUTTON element was not.
Either it was overlooked, or there was a reason.

Bummer. Does nobody use this stuff?


hj

 

[Martin Honnen]

[This was submitted as a bug to Opera;

It isn't a bug. Just some oddness in the DOM specification.

Right; the "oddness" makes dynamicly created button elements a lot
less useful, though; and in Mozilla this "oddness" is ignored (type
is read/write),

At least for <input> elements I remember that originally Mozilla
followed the readonly for the type property specified in DOM Level 1
until someone file a bug complaining that that disallows dynamically
creating the different input types. It is likely that for <button>
elements the approach was similar.
So the problem is indeed with the DOM spec but of course browsers should
follow common sense and allow dynamical creation of the different types
of input and button elements, after all the DOM should allow you to
programmatically create anything that static HTML allows.

 

[Hallvord R. M. Steen]

[This was submitted as a bug to Opera; I'm posting it here, after not
seeing mention of this in a newsgroup search]:

The Javascript to create a button element dynamically is

elem = document.createElement('button');
elem.type = 'reset';
Running this code in Opera 7.54 gives the message:

"DOMException: NO_MODIFICATION_ALLOWED_ERR"

Good catch, thanks: the specification probably should be corrected to
allow you to set type. I have confirmed your bug report. As you mentioned
we're probably "correct" spec-wise but when the specs are inconsistent..

 

[Csaba Gabor]

The Javascript to create a button element dynamically is
elem = document.createElement('button');
elem.type = 'reset'; ....
<button name="rset" type="reset">Reset Button</button>

For what it's worth, Mozilla makes the "type" property read/write; and
IE requires its own bizarre argument to createElement (as:

elem = document.createElement('<button type="reset" value="Reset">Reset</button>')

Interesting post. I didn't try this, but what about cloning an
existing button element (of the type you desire), and then modifying
the remaining elements?

Also, I use button, when possible (ie. browser dependent), because that
way I can indicate the access key by underlining it. e.g. <button ...
accessKey=o><u>O</u>K</button>. I seem to recall that you have to be
careful about how that text changes in some browsers. Possibly it is
necessary to nest the text in a div? I forget, but just beware if you
are doing things like
Mor<u>e</u> >> changing to/from
L<u>e</u>ss <<

Csaba Gabor from Vienna

 

[Howard Jess]

Interesting post. I didn't try this, but what about cloning an
existing button element (of the type you desire), and then modifying
the remaining elements?

I'm not sure how you would do this; what do you mean by "an existing
button element"? What if I'm creating the entire page using Javascript?

In any case, I do have a (not very clean) workaround: a combo function that
asks for element type (and name, which has a similar problem in IE) all
at one time; this lets me code it as (for brevity here, no error checking):

function createButton(type,name) {
var div = document.createElement('div');
div.innerHTML='<button type="'+type+'" name="'+name+'"></button>';
return div.firstChild;
}

I'd rather not use the non-standard innerHTML, but it's pretty well-
supported by all DOM-ish browsers, so ...

hj

 

[Thomas 'PointedEars' Lahn]

Interesting post. I didn't try this, but what about cloning an
existing button element (of the type you desire), and then modifying
the remaining elements?

[...] What if I'm creating the entire page using Javascript?

Then you would have far more serious problems than this.


PointedEars