Problem applying HTML 4.01 DOM in scripting

R

Richard Lionheart

Hi All,

I've taken the advice of a few people and managed to cobble together an
HTML 4.01 Strict-compliant document (according to the W3C Validation
Service), but the way I try to pass a TextArea object to a script
function doesn't work.

What's the least amount of change I can make to this to remain
compliant but also correct for execution?

TIA,
Richard

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>An "HTML 4.01 Strict" compliant document</title>
<meta http-equiv="Content-Style-Type" content="text/css" >
<meta http-equiv="content-type"
content="text/html;charset=ISO-8859-1" >
<style type="text/javascript">
#red {color:red}
.blue {color:blue}
</style>

<script type="text/javascript">
function GenLines(o, n)
{
var aL = []; // Array of lines, sans newlines, which will
populate MyTextArea
// when concatenated with newline separators
// if ((o = o.form) && (o = o.elements) && (o = o['MyTextArea']))
{
for (var i=1; i<=n; i++)
{
aL.push("Line " + i);
}
o.value = aL.join("\n");
}
}
</script>

</head>
<body>
<div>
<p>
... Your HTML content here ...</p>
<p id="red">
DOCTYPEs are "seatbelts" for HTML authors</p>
<p><b class="blue">Item 1</b> <i>Item 2</i></p>
<input id="Button1" type="button" value="Click for 12 lines"
onclick="GenLines(MyTextArea, 12)" />
<br />
<br />
<input id="MyTextArea" style="width: 420px; height: 122px"
type="text" /></div>
</body>
</html>
 
D

David Dorward

Richard said:
, but the way I try to pass a TextArea object to a script
function doesn't work.
<input id="Button1" type="button" value="Click for 12 lines"
onclick="GenLines(MyTextArea, 12)" />

MyTextArea is an underfined variable. You probably want something like:
onclick="GenLines(this.form.elements['MyTextArea'], 12);"
Don't use XHTML style self closing tags in HTML. Their meaning is different.
 
V

VK

Richard said:
Hi All,

I've taken the advice of a few people and managed to cobble together an
HTML 4.01 Strict-compliant document (according to the W3C Validation
Service), but the way I try to pass a TextArea object to a script
function doesn't work.

What's the least amount of change I can make to this to remain
compliant but also correct for execution?

TIA,
Richard

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>An "HTML 4.01 Strict" compliant document</title>
<meta http-equiv="Content-Style-Type" content="text/css" >
<meta http-equiv="content-type"
content="text/html;charset=ISO-8859-1" >
<style type="text/javascript">
#red {color:red}
.blue {color:blue}
</style>

<script type="text/javascript">
function GenLines(o, n)
{
var aL = []; // Array of lines, sans newlines, which will
populate MyTextArea
// when concatenated with newline separators
// if ((o = o.form) && (o = o.elements) && (o = o['MyTextArea']))
{
for (var i=1; i<=n; i++)
{
aL.push("Line " + i);
}
o.value = aL.join("\n");
}
}
</script>

</head>
<body>
<div>
<p>
... Your HTML content here ...</p>
<p id="red">
DOCTYPEs are "seatbelts" for HTML authors</p>
<p><b class="blue">Item 1</b> <i>Item 2</i></p>
<input id="Button1" type="button" value="Click for 12 lines"
onclick="GenLines(MyTextArea, 12)" />
<br />
<br />
<input id="MyTextArea" style="width: 420px; height: 122px"
type="text" /></div>
</body>
</html>

Was it a check for local public? ;-)

This page cannot possibly be a valid HTML of any kind just because it
uses XHTML tag format />

Also input=text accepts *single line text*. For multiline text you use
<textarea>. Also... any way, there is no "minimum change" here - it has
to be completely rewritten. Study the valid variant, do not hesitate to
ask if some changes are not clear:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML Strict 4.01//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>An "HTML 4.01 Strict" compliant document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
#red {color:red}
.blue {color:blue}
</style>
<script type="text/javascript">
function GenLines(o, n) {
var aL = [];
for (var i=0; i<=n; i++) {
aL.push("Line " + i);
}
o.value = aL.join("\n");
}
</script>
</head>
<body>
<p>
... Your HTML content here ...</p>
<p id="red">
DOCTYPEs are "seatbelts" for HTML authors</p>
<p><b class="blue">Item 1</b> <i>Item 2</i></p>
<form action="">
<fieldset>
<legend>Hello W3C world!</legend>
<input id="Button1" type="button" value="Click for 12 lines"
onClick="GenLines(this.form.elements['MyTextArea'],12)">
<br>
<br>
<textarea name="MyTextArea" cols="20" rows="12"></textarea>
</fieldset>
</form>
</body>
</html>
 
D

David Dorward

VK said:
This page cannot possibly be a valid HTML of any kind just because it
uses XHTML tag format />

Actually, it can.

<foo /> means the same as <foo>> and thus <foo>&gt; in HTML. So anywhere you
are allowed character data, you can use XHTML style self-closing tags and
be valid. (So <img> and <br>, along with <hr> in some circumstances).

Of course, while it is valid, it doesn't mean what you are trying to say, so
it should be avoided. (You just can't expect the Markup Validator to pick
up on that error).
 
R

Richard Lionheart

Hi David,

Thanks for taking the trouble to respond to my question.
You probably want something like:
onclick="GenLines(this.form.elements['MyTextArea'], 12);"

I sure do. But I didn't want my code embedded in <form> tags because
the W3C validator wanted an "action" attribute for <form>.

To get this working, I:
-- switched to "form"
-- removed <br />
-- re-established a conditional around my "for" loop that had been
recommended

This was partially successful. I got "Line 1" in MyTextArea, but not
12 "Line x" entries stacked in TextArea that I had gotten before I
switched to this DOM approach.

I added a debug line before the loop, and that yielded "n = 12"
(confirming that the count was being passed successfully to the
function) instead of "Line 1".

If you can give me another push forward, I might be able to climb this
mountain :)

Again, thanks in advance.
Richard

******** Revised code ************
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>An "HTML 4.01 Strict" compliant document</title>
<meta http-equiv="Content-Style-Type" content="text/css" >
<meta http-equiv="content-type"
content="text/html;charset=ISO-8859-1" >
<style type="text/javascript">
#red {color:red}
.blue {color:blue}
</style>

<script type="text/javascript">
function GenLines(o, n)
{
var aL = []; // Array of lines, sans newlines, which will
populate MyTextArea
// when concatenated with newline separators
// aL.push("n = " + n); // DEBUG
if ((o = o.form) && (o = o.elements) && (o = o['MyTextArea']))
{
for (var i=1; i<=n; i++)
{
aL.push("Line " + i);
}
o.value = aL.join("\n");
}
}
</script>

</head>
<body>
<form action="FormOutput.txt">
<p>
... Your HTML content here ...</p>
<p id="red">
DOCTYPEs are "seatbelts" for HTML authors</p>
<p>
<b class="blue">Item 1</b> <i>Item 2</i></p>
<p><input id="Button1" type="button" value="Click for 12 lines"
onclick="GenLines(this.form.elements['MyTextArea'], 12)"
/></p>
<p>
<input id="MyTextArea" style="width: 420px; height: 122px"
type="text" /></p>
</form>
</body>
</html>
 
V

VK

Richard said:
If you can give me another push forward, I might be able to climb this
mountain :)

Please see the working and validated example I already posted.

<form action=""> is the regular way to pacify validator (method is
"GET" by default). The most important HTML error made (skipping on
script) is that input=text accept *single line text*. To display
multiline text you have to use <textarea>
 
R

Richard Lionheart

Hey VK and David,

You folks are great. I see where all the mistakes are now. I'm going
to clean it up now and post back for just a couple of follow-up
questions if W3Schools et al don't seem to provide relevant guidance.

Thanks to you both.

Regards,
Richard
 
V

VK

David said:
Actually, it can.

Actually it cannot ;-)

By reading <http://www.w3.org/TR/html401/strict.dtd> (which no one
seems to read but everyone links :) we see no "/" as valid entity
within <...>

The allowed entities are spelled rather explicetly: tag name itself,
tag attribute name, tag attribute value, event handler name, etc...

"/" character is neither of all of this, so must be treated equally
with say "wrap" attribute or any other unrecognized entity.
The only reason Validator doesn't get upset on it is because it was
intentionally patched to stimulate XHTML usage (in any shall perform
form).
 
R

Richard Lionheart

Hey VK, your suggestions work GREAT. Many thanks.
which no one seems to read but everyone links :)

Hey, nobody sits down and reads the entire dictionary either :)

But your preceding comment explains why M/S VWD keep closing "<br" with
" />" when I key in a simple ">".

Both of you folks have resuscitated my understanding that ensuring
every tag had closure was an XML requirement, not an HTML issue.

And it was great to find out that including <fieldset> obviated the
need for those <p> tags I had to apply as a kludge to avoid complaints
from the W3C Validator.

I originally had a <textarea> specification but lost it unknowingly
when I accepted someone else's idea of "objectifying" my original code.

QUESTION: What do you think of the protection this other person
recommended around the function. Is it helpful. If I use it,
shouldn't have "else alert" code accompanying it?

Again, thanks to you both for helping me escape my frustration and
enlightening me at the same time.

Best wishes,
Richard
 
R

Richard Lionheart

Woops. Here's the clean code for my personal "model comploiant code":

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>An "HTML 4.01 Strict" compliant document</title>
<meta http-equiv="Content-Style-Type" content="text/css" >
<meta http-equiv="content-type"
content="text/html;charset=ISO-8859-1" >
<style type="text/javascript">
#red {color:red}
.blue {color:blue}
</style>

<script type="text/javascript">
function GenLines(o, n)
{
var aL = []; // Array of lines, sans newlines, which will
populate MyTextArea
// when concatenated with newline separators
if ((o = o.form) && (o = o.elements) && (o = o['MyTextArea']))
{
for (var i=1; i<=n; i++)
{
aL.push("Line " + i);
}
o.value = aL.join("\n");
}
}
</script>

</head>
<body>
<p>
... Your HTML content here ...</p>
<p id="red">
DOCTYPEs are "seatbelts" for HTML authors</p>
<p>
<b class="blue">Item 1</b> <i>Item 2</i></p>
<form action="">
<fieldset>
<legend>Hello W3C world!</legend>
<input id="Button1" type="button" value="Click for 12 lines"
onclick="GenLines(this.form.elements['MyTextArea'], 12)">
<br><br>
<textarea name="MyTextArea" cols="20" rows="12"></textarea>
</fieldset>
</form>
</body>
</html>
 
V

VK

Richard said:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>An "HTML 4.01 Strict" compliant document</title>
<meta http-equiv="Content-Style-Type" content="text/css" >
This meta tag is useless as it was not implemented by any browser, it
is just mention in one of W3C recommendation. It is also harmless as it
may you think that now you can skip on type declaration in the the
<meta http-equiv="content-type"
content="text/html;charset=ISO-8859-1" >

HTTP-EQUIV metas usually presented in the same sase as they would be
sent from server: "Content-Type", not "content-type".

<style type="text/javascript">

Pardon? :)
#red {color:red}
.blue {color:blue}
</style>

<script type="text/javascript">
function GenLines(o, n)
{
var aL = []; // Array of lines, sans newlines, which will
populate MyTextArea
// when concatenated with newline separators
if ((o = o.form) && (o = o.elements) && (o = o['MyTextArea']))

This is completely unnecessary and wrong besides that: you are using
assignment operator (=) instead of comparison operator (==). So you
just consecutively assigning the most fantastic values to poor "o". The
last value your assign is undefined (because o['MyTextArea'] property
doesn't exist). Just remove it completely.

So the working (and valid) variant is:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>An "HTML 4.01 Strict" compliant document</title>
<meta http-equiv="Content-Type"
content="text/html;charset=ISO-8859-1">
<style type="text/css">
#red {color:red}
.blue {color:blue}
</style>

<script type="text/javascript">
function GenLines(o, n)
{
var aL = []; // Array of lines, sans newlines,
// which will populate MyTextArea
// when concatenated with newline separators
for (var i=1; i<=n; i++)
{
aL.push("Line " + i);
}
o.value = aL.join("\n");
}
</script>

</head>
<body>
<p>
... Your HTML content here ...</p>
<p id="red">
DOCTYPEs are "seatbelts" for HTML authors</p>
<p>
<b class="blue">Item 1</b> <i>Item 2</i></p>
<form action="">
<fieldset>
<legend>Hello W3C world!</legend>
<input id="Button1" type="button" value="Click for 12 lines"
onClick="GenLines(this.form.elements['MyTextArea'], 12)">
<br><br>
<textarea name="MyTextArea" cols="20" rows="12"></textarea>
</fieldset>
</form>
</body>
</html>
 
D

David Dorward

VK wrote:

<form action=""> is the regular way to pacify validator

Is it? That's not very nice.

If you aren't planning to submit the data to a server then there shouldn't
be a form at all (rather then a form that submits to the current URL).

For that matter, if you are displaying data, then you shouldn't use a form
control (as those are designed for the user to enter data).
 
D

David Dorward

VK said:
By reading <http://www.w3.org/TR/html401/strict.dtd> (which no one
seems to read but everyone links :) we see no "/" as valid entity
within <...>

It isn't allowed (unquoted) within a tag. It _ends_ a tag. The DTD doesn't
say that ">" ends a tag either. This is specified in the SGML
specification.

http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.7 points out that such
things are valid but badly supported.
"/" character is neither of all of this, so must be treated equally
with say "wrap" attribute or any other unrecognized entity.
The only reason Validator doesn't get upset on it is because it was
intentionally patched to stimulate XHTML usage (in any shall perform
form).

Not true. I haven't looked at the precise details of what the validator does
in XML mode, but for HTML documents it continues to use SGML mode.

The W3C Markup Validator correctly reads:

<p> foo <br /> bar </p>

as:

foo
 
V

VK

David said:
VK wrote:



Is it? That's not very nice.

Complain to W3C, not to me. That should be default value for action ==
current page longest time ago. Another thing to do as soon as DTD's
will be finally taking from the freezer.
If you aren't planning to submit the data to a server then there shouldn't
be a form at all (rather then a form that submits to the current URL).

An interesting idea. As soon as we manage to prohibit web applications,
ajaxoids, XML+XSL, data binding and other terrible stuff people dared
to invent since 1999, I may follow this advise. To start with I would
initiate death penalty request for using ajaxoids. ;-)
For that matter, if you are displaying data, then you shouldn't use a form
control (as those are designed for the user to enter data).

Form is the user interface. How to handle the data is up to programmer.

Web application? AJAX? Bush Jr. president, Clinton is gone way ago? ;-)
 
D

David Dorward

VK said:
Richard Lionheart wrote:

Wrong DTD link: must be <http://www.w3.org/TR/html401/strict.dtd>
because you are reffering HTML 4.01, not HTML 4.0

If I visit "http://www.w3.org/TR/html4/strict.dtd" it says:

This is HTML 4.01 Strict DTD

It also says:

Typical usage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

And if I pay a visit to http://www.w3.org/QA/2002/04/valid-dtd-list.html -
the same version appears there.

So Richard is using the correct form.
This meta tag is useless as it was not implemented by any browser, it
is just mention in one of W3C recommendation.

"Mention" meaning "It is required if you use any intrinsic events" (which
Richard does).
It is also harmless as it may you think that now you can skip on type
declaration in the the <style> tag itself.

I think you mean "harmful" there ... and since the validator will complain
about a missing type attribute such a misapprehension is unlikely.
HTTP-EQUIV metas usually presented in the same sase as they would be
sent from server: "Content-Type", not "content-type".

http://www.w3.org/Protocols/rfc2616/rfc2616-sec4.html#sec4.2

Field names are case-insensitive.

So it really doesn't matter.
 
D

David Dorward

An interesting idea. As soon as we manage to prohibit web applications,

Well they would use a form and SUBMIT DATA TO THE SERVER.
ajaxoids,

Should have a form that will submit data to the server as a fallback if the
JavaScript fails,

What does that have to do with using a form but not intending to submit data
to the server?
data binding

What does that have to do with using a form but not intending to submit data
to the server?
Form is the user interface. How to handle the data is up to programmer.

Eh? Form controls are UI controls to get data from the user. HTML has many
other elements to markup information that is being displayed to the user.
 
V

VK

David said:
It isn't allowed (unquoted) within a tag. It _ends_ a tag. The DTD doesn't
say that ">" ends a tag either. This is specified in the SGML
specification.

An interesting idea. So the relevant DTD specs must look something like
"DTD rules applicability sequentially decreases from left to right
withing the tag and it reaches zero applicability at the last position
before >" :)

It doesn't look right though, because say <br /> leaves Validator
happy, but <br !> leads to "character "!" not allowed in attribute
specification list". I would be happy to find "/" in DTD attribute
specification list, but it is not there.

So it is an intentional patch, and Validator was/is/will (at least
partially) a brain waching tool for pushing desired behavior.

We may continue this in ciwah if you want to (I don't).
 
R

Richard Lionheart

Hi VK,

Thanks for your additional contribution to reform my errant ways :)
Wrong DTD link: must be > <http://www.w3.org/TR/html401/strict.dtd>
because you are referring HTML 4.01, not HTML 4.0

Thanks for noticing that. I didn't, and even if I had I would have
said "If it ain't broke ...".

I haven't tried it out yet, but I got this from "HTML 4.01 -
Strict ..." at http://www.w3.org/QA/2002/04/valid-dtd-list.html, so
you might be wrong here, though you've batted 1000 so far!!
This meta tag is useless as it was not implemented by any browser, it
is just mention in one of W3C recommendation. It is also HARMLESS as
it may you think that now you can skip on type declaration in the
<style> tag itself.

Hmm, sounds like it might be harmful, not "harmless" :)

I don't know where I got this and the next Meta tag. But I agree it
Pardon? :)
<style type="text/css">

I'm mystified as to how ="javascript" got in there. Probably a
brain-freeze in my head, but I was about to get to it indirectly as I
investigated how my colors stopped working all of a sudden. Thanks for
solving my problem before
being asked about it :)
if ((o = o.form) && (o = o.elements) && (o = o['MyTextArea']))
This is completely unnecessary and wrong besides that: you are using
assignment operator (=) instead of comparison operator (==).

Yes, I noticed this. I've done a lot of C and C++ over a couple of
decades, but I didn't feel a need to attack this problem at once.
So the working (and valid) variant is: ...

Thanks. I've made the changes in my current document that you
identified above. I've saved your version as a benchmark for mine to
be referenced a little later.

Again, thanks for weighing in so effectively.

Regards,
Richard
 
M

Michael Winter

On 18/03/2006 19:49, VK wrote:

[snip]
It doesn't look right though, because say <br /> leaves Validator
happy

I'm surprised you haven't read about this before. It's been mentioned
numerous times in various groups.

A slash used in a start tag creates a NET-enabling start tag. NET, or
null end-tag, is a shortened tag form:

<p class="note">...content...</p>

can be written as:

<p class="note"/...content.../

The first slash ends the list of attributes, and the second closes the
element.

For elements with an EMPTY content model, the first slash ends both the
attribute list and the element itself. Therefore, in HTML:

<br />

is actually:

<br>&gt;

This is, of course, mostly academic. Browsers do not implement HTML as
an application of SGML. Nevertheless, constructs such as these should
not appear in HTML markup.
but <br !> leads to "character "!" not allowed in attribute
specification list".

Quite correct, as an exclamation mark in the attribute list doesn't
match any of the productions in SGML.
I would be happy to find "/" in DTD attribute specification list, but
it is not there.

As David implied, this has nothing to do with any DTD. It is a feature
of SGML, enabled in the SGML declaration for HTML.

[snip]

Mike
 
V

VK

if ((o = o.form) && (o = o.elements) && (o = o['MyTextArea']))
This is completely unnecessary and wrong besides that: you are using
assignment operator (=) instead of comparison operator (==).

Actually it is not undefined after all assignments, and it even works
as intended. A totally cool sample of how a completely wrong code can
work by occasion :)

Initially o contains a reference to textarea element.

if ((o = o.form)
form element has .form property pointing to owner form.
o now contains a reference to the whole form.

&& (o = o.elements)
o now contains a reference to the elements collection in the form

&& (o = o['MyTextArea']))
o again contains a reference to textarea element retrieved from the
elements collection.

No one of these assignments has a result undefuned, so the entire block
gets value of the last assignment (textarea reference).
A valid reference is being evaluated to true within if() statement, so
the inner blocks is executed.

Really cool. :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top