HTML 4.01 Transitional validation

[Tim L]

A newbie question:

A page including the code fragment below works - in FF - but HTML 4.01
Transitional validation tells me:
"document type does not allow element "SCRIPT" here"
<SELECT id="light" >
<SCRIPT type="text/javascript">
for (j=0;j<9;j++) {document.write("<OPTION VALUE='" + j + "'>
" + (j + 1) ) } ;
</SCRIPT>
</SELECT>

Can anyone help?

(The fragment also produced the select elements I expect in IE)

 

[Martin Honnen]

A page including the code fragment below works - in FF - but HTML 4.01
Transitional validation tells me:
"document type does not allow element "SCRIPT" here"
<SELECT id="light" >
<SCRIPT type="text/javascript">
for (j=0;j<9;j++) {document.write("<OPTION VALUE='" + j + "'>
" + (j + 1) ) } ;
</SCRIPT>
</SELECT>

You will have to document.write the complete select element including
the option elements.

 

[Dylan Parry]

Pondering the eternal question of "Hobnobs or Rich Tea?", Tim L finally
proclaimed:

[script to add options to select element]

"document type does not allow element "SCRIPT" here"

Either do as Martin suggests, or create a Javascript function that fires
on the onload event and adds new child elements to the select element
through the DOM.

Something like:

---- start ----
document.onload = addOptions;

function addOptions() {
var select = document.getElementById("light");

for (i = 0; i < 9; i++) {
var option = document.createElement("option");
option.text = i+1;
option.value = i+1;
select.appendChild(option);
}
}
----- end -----

 

[Randy Webb]

Dylan Parry said the following on 5/15/2006 10:05 AM:

Pondering the eternal question of "Hobnobs or Rich Tea?", Tim L finally
proclaimed:

[script to add options to select element]

"document type does not allow element "SCRIPT" here"

Either do as Martin suggests, or create a Javascript function that fires
on the onload event and adds new child elements to the select element
through the DOM.

Something like:

---- start ----
document.onload = addOptions;

Except that line should be window.onload

function addOptions() {
var select = document.getElementById("light");

for (i = 0; i < 9; i++) {
var option = document.createElement("option");
option.text = i+1;
option.value = i+1;
select.appendChild(option);
}
}

And if the browser doesn't support gEBI (unlikely) but createElement and
appendChild could lack support. Feature test

 

[Dylan Parry]

Pondering the eternal question of "Hobnobs or Rich Tea?", Randy Webb
finally proclaimed:

Except that line should be window.onload

You're right, of course.

And if the browser doesn't support gEBI (unlikely) but createElement and
appendChild could lack support. Feature test

Which is of course why I said "something like" I would probably not
use Javascript for creating options for a select element in the way that
the OP was obviously using it anyway. In fact for the limited number of
options that the OP is creating, it would be easier and more reliable to
simply write the option elements by hand!

 

[Tim L]

Thanks.

Where on line should I have been able to find that documented / explained?

Tim

 

[Martin Honnen]

Where on line should I have been able to find that documented / explained?

Well you have to look at the HTML definition and learn to read a DTD,
the select element definition in HTML 4 is here
<http://www.w3.org/TR/html4/interact/forms.html#edef-SELECT>
and says
<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- option selector -->
meaning the allowed contents is one or more optgroup or option element.
There is also prose saying "A SELECT element must contain at least one
OPTION element.".
So the definition definitely shows that script is not allowed as a child
element of select.

 

[Thomas 'PointedEars' Lahn]

document.onload = addOptions;

Completely proprietary, and even deprecated there (in favor of
`window.onload'). Standards compliant would be

document.body.addEventListener('load', addOptions, false);

However, HTML already provides the means.

function addOptions() {
var select = document.getElementById("light");

for (i = 0; i < 9; i++) {

^
Undeclared identifier which due to the assignment becomes a property
of the Global Object or breaks the script (depending on the DOM).

var option = document.createElement("option");
option.text = i+1;
option.value = i+1;
select.appendChild(option);
}
}

That may be the standards compliant approach, but it is not cross-browser,
and it is known to fail. Probably it is better to create Option elements
(from JavaScript/JScript 1.0+), and add them to the HTMLSelectElement
object's `options' collection:

<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function addOptions(sForm, sSelect)
{
var select = document.forms[sForm].elements[sSelect];

for (var i = 0; i < 9; i++)
{
select.options[select.options.length] = new Option(i + 1, i + 1);
}
}
</script>
...
</head>

<body onload="addOptions('myForm', 'mySelect');">
...
</body>


PointedEars

 

[Randy Webb]

Thomas 'PointedEars' Lahn said the following on 5/22/2006 12:21 PM:

Completely proprietary, and even deprecated there (in favor of
`window.onload'). Standards compliant would be

document.body.addEventListener('load', addOptions, false);

However, HTML already provides the means.

Script does as well.

^
Undeclared identifier which due to the assignment becomes a property
of the Global Object or breaks the script (depending on the DOM).

IFF you have an element with an ID or Name of 'i' and you are using IE.
Your pedantics get old.

That may be the standards compliant approach, but it is not cross-browser,
and it is known to fail. Probably it is better to create Option elements
(from JavaScript/JScript 1.0+), and add them to the HTMLSelectElement
object's `options' collection:

No DTD, invalid HTML follows.

<head>
...

I suppose you added the ... so you couldn't be bothered with creating a
title element that is required in any valid HTML document?

<snipped nonsense useless code>