Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Problem applying HTML 4.01 DOM in scripting

Reply
Thread Tools

Problem applying HTML 4.01 DOM in scripting

 
 
Richard Lionheart
Guest
Posts: n/a
 
      03-18-2006
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>

 
Reply With Quote
 
 
 
 
David Dorward
Guest
Posts: n/a
 
      03-18-2006
Richard Lionheart wrote:
> , 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);"

> <br />

Don't use XHTML style self closing tags in HTML. Their meaning is different.

> <input id="MyTextArea" style="width: 420px; height: 122px"
> type="text" /></div>


--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
 
Reply With Quote
 
 
 
 
VK
Guest
Posts: n/a
 
      03-18-2006

Richard Lionheart wrote:
> 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>

 
Reply With Quote
 
David Dorward
Guest
Posts: n/a
 
      03-18-2006
VK wrote:

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

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
 
Reply With Quote
 
Richard Lionheart
Guest
Posts: n/a
 
      03-18-2006
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>

 
Reply With Quote
 
VK
Guest
Posts: n/a
 
      03-18-2006

Richard Lionheart wrote:
> 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>

 
Reply With Quote
 
Richard Lionheart
Guest
Posts: n/a
 
      03-18-2006
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

 
Reply With Quote
 
VK
Guest
Posts: n/a
 
      03-18-2006

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

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

 
Reply With Quote
 
Richard Lionheart
Guest
Posts: n/a
 
      03-18-2006
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

 
Reply With Quote
 
Richard Lionheart
Guest
Posts: n/a
 
      03-18-2006
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>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
DOM ? HTML DOM mk834tt@yahoo.com Javascript 1 12-20-2007 01:08 AM
Convert a XML DOM Object to a HTML DOM Object manjunath.d@gmail.com XML 0 09-20-2005 08:16 AM
DOM Created Elements / Cross Frame Scripting Problem. Firefox NoCopy na Javascript 6 06-21-2005 08:25 PM
Using a Scripting Language as Your Scripting Language DaveInSidney Python 0 05-09-2005 03:13 AM
Python is the best and most popular general purpose scripting language; the universal scripting language Ron Stephens Python 23 04-12-2004 05:32 PM



Advertisments