HTML 4.01 Transitional validation

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)

re: HTML 4.01 Transitional validation

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

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

--

Martin Honnen
http://JavaScript.FAQTs.com/

re: HTML 4.01 Transitional validation

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

[script to add options to select element][color=blue]
> "document type does not allow element "SCRIPT" here"[/color]

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

--
Dylan Parry
http://webpageworkshop.co.uk -- FREE Web tutorials and references

re: HTML 4.01 Transitional validation

Dylan Parry said the following on 5/15/2006 10:05 AM:[color=blue]
> Pondering the eternal question of "Hobnobs or Rich Tea?", Tim L finally
> proclaimed:
>
> [script to add options to select element][color=green]
>> "document type does not allow element "SCRIPT" here"[/color]
>
> 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;[/color]

Except that line should be window.onload
[color=blue]
> 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);
> }
> }[/color]

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

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

re: HTML 4.01 Transitional validation

Pondering the eternal question of "Hobnobs or Rich Tea?", Randy Webb
finally proclaimed:
[color=blue][color=green]
>> document.onload = addOptions;[/color]
>
> Except that line should be window.onload[/color]

You're right, of course.
[color=blue][color=green]
>> 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);
>> }
>> }[/color]
>
> And if the browser doesn't support gEBI (unlikely) but createElement and
> appendChild could lack support. Feature test :)[/color]

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!

--
Dylan Parry
http://electricfreedom.org -- Where the Music Progressively Rocks!

re: HTML 4.01 Transitional validation

Thanks.

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

Tim
"Martin Honnen" <mahotrash@yahoo.de> wrote in message
news:44688692$0$11067$9b4e6d93@newsread4.arcor-online.net...[color=blue]
>
>
> Tim L wrote:
>[color=green]
>> 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>[/color]
>
> You will have to document.write the complete select element including the
> option elements.
>
> --
>
> Martin Honnen
> http://JavaScript.FAQTs.com/[/color]

re: HTML 4.01 Transitional validation

Tim L wrote:
[color=blue]
> Where on line should I have been able to find that documented / explained?[/color]

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.

--

Martin Honnen
http://JavaScript.FAQTs.com/

re: HTML 4.01 Transitional validation

Dylan Parry wrote:
[color=blue]
> document.onload = addOptions;[/color]

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.
[color=blue]
> function addOptions() {
> var select = document.getElementById("light");
>
> for (i = 0; i < 9; i++) {[/color]
^
Undeclared identifier which due to the assignment becomes a property
of the Global Object or breaks the script (depending on the DOM).
[color=blue]
> var option = document.createElement("option");
> option.text = i+1;
> option.value = i+1;
> select.appendChild(option);
> }
> }[/color]

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
--
There are two possibilities: Either we are alone in the
universe or we are not. Both are equally terrifying.
-- Arthur C. Clarke

re: HTML 4.01 Transitional validation

Thomas 'PointedEars' Lahn said the following on 5/22/2006 12:21 PM:[color=blue]
> Dylan Parry wrote:
>[color=green]
>> document.onload = addOptions;[/color]
>
> 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.[/color]

Script does as well.
[color=blue][color=green]
>> function addOptions() {
>> var select = document.getElementById("light");
>>
>> for (i = 0; i < 9; i++) {[/color]
> ^
> Undeclared identifier which due to the assignment becomes a property
> of the Global Object or breaks the script (depending on the DOM).[/color]

IFF you have an element with an ID or Name of 'i' and you are using IE.
Your pedantics get old.
[color=blue][color=green]
>> var option = document.createElement("option");
>> option.text = i+1;
>> option.value = i+1;
>> select.appendChild(option);
>> }
>> }[/color]
>
> 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:
>[/color]

No DTD, invalid HTML follows.
[color=blue]
> <head>
> ...[/color]

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>

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/