innerHTML and <br>

Don Li · Dec 17, 2007

js block
-----------
function addBR(){
document.getElementById('noteid').innerHTML =
document.getElementById('noteid').value + ' <br>';
}

html form block
---------------------
<textarea id="noteid" name="notes" cols="70" rows="4" wrap="SOFT"
style="background-color:#faf9f7">some value here</textarea>

js event trigger
---------------------
<a href="javascript:addBR()"><xmp>add <BR></xmp></a>

Browser behavior
------------------------
FireFox 2, the first time, event trigger works, however, subsequently
it won't work.
IE, simply won't work, complaining about unknown runtime problem.
How to write it correctly?

possible culprint
----------------------
the page has multiple named forms, however, there's only one noteid
field.

Thank you.

Patient Guy · Dec 17, 2007

Try this:

1. Validate the HTML of your document first (should be done before even
posting).
2. Then validate the HTML with the BR element inserted where you would
expect it to be inserted, as if the script had executed.
3. Check the HTML specification to see what content/attributes/character
text is allowed within the element or its attribute in which you are
inserting an HTML element. This is especially true of TEXTAREA elements.

If a validation fails, then a browser is liable to do anything to recover
from it, including doing nothing.

Doug Gunnoe · Dec 17, 2007

js block
-----------
function addBR(){
document.getElementById('noteid').innerHTML =
document.getElementById('noteid').value + ' <br>';
}

html form block
---------------------
<textarea id="noteid" name="notes" cols="70" rows="4" wrap="SOFT"
style="background-color:#faf9f7">some value here</textarea>

js event trigger
---------------------
<a href="javascript:addBR()"><xmp>add <BR></xmp></a>

Browser behavior
------------------------
FireFox 2, the first time, event trigger works, however, subsequently
it won't work.
IE, simply won't work, complaining about unknown runtime problem.
How to write it correctly?

possible culprint
----------------------
the page has multiple named forms, however, there's only one noteid
field.

Thank you.

Try

function addBR(){
document.getElementById('noteid').value =
document.getElementById('noteid').value + ' \n';
}

Doug Gunnoe · Dec 17, 2007

Randy already answered the question. Sorry for the superfluous
redundant redundancy.

Don Li · Dec 17, 2007

Patient Guy,

Thanks for the point on validating HTML document. It does not seem to
be the culprit.

I've created a plain and clean HTML doc below and tested it with same
result.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>test br insert</title>
<script type="text/javascript">

function addBR(){
document.getElementById('noteid').innerHTML =
document.getElementById('noteid').value + ' <br>';
}

</script>
</head>
<body>
<form name="testInsertBR">
<textarea id="noteid" name="notes" cols="70" rows="4" wrap="SOFT"
style="background-color:#faf9f7"></textarea>
<br>
<a href="javascript:addBR()"><xmp><BR></xmp></a></td>
</form>
</body>
</html>

Doug Gunnoe · Dec 17, 2007

As per Randy's post above

document.getElementById('noteid').value += ' \n';

Don Li · Dec 17, 2007

Beautiful, thanks.

Don Li said the following on 12/17/2007 1:18 PM:

You don't set the innerHTML of a textarea. You set it's value property.
Ironically, you tried to set the innerHTML by reading the value property.

document.getElementById('noteid').value += ' <br>';

Try it.

Don't use the javascript: pseudo-protocol. Use a button or an onclick event.
<URL:http://jibbering.com/faq/index.html#FAQ4_24>

The culprit is not "multiple named forms". You aren't even using the
forms collection but rather the getElementById crutch.

If you want a line break in the textarea, use \n. If you want the
literal text "<br>" then use that.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

Don Li · Dec 17, 2007

Your approach also works, thanks.

.... said:
Try

function addBR(){
document.getElementById('noteid').value =
document.getElementById('noteid').value + ' \n';

}

Patient Guy · Dec 17, 2007

Randy Webb said:
Patient Guy said the following on 12/17/2007 1:42 PM:

Irrelevant to the problem.

Should be relevant to any problem posted here. A great many problems are
resolved if the poster does a validation.

Irrelevant to the problem.

His script attempts to insert a BR element within the content of a
TEXTAREA element, does it not? He observes unexpected browser behavior,
does he not?

The following is a minimal valid HTML document which contains a form
control within the form.:
======= start HTML document ====
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Test BR inside TEXTAREA</title>
</head>
<body>
<form action="#">
<textarea rows="1" cols="60">This form control
will insert a BR element within its content.</textarea>
</form>
</body>
</html>
======= end HTML document ====

The following is now a document which would have produced the poster's
intended modification of an HTML document, a result that would have been
an invalid HTML document. The resulting invalidation would have informed
the poster that something was amiss, and he might have discovered that the
content of a TEXTAREA element cannot itself contain HTML elements and/or
that setting the innerHTML property of a TEXTAREA object---a property not
at all defined in the HTML specification anyway and which seems to be
inadvisedly recommended for use by contributers to this newsgroup----is
entirely purposeless.

======= start HTML document ====
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Test BR inside TEXTAREA</title>
</head>
<body>
<form action="#">
<textarea rows="1" cols="60">This form control
inserts a BR element within its content.<br></textarea>
</form>
</body>
</html>
======= end HTML document ====

Had the poster taken these steps, he would have discovered his problem,
and so the recommndation is entirely relevant, your opinion
notwithstanding.

Don Li · Dec 18, 2007

Hey guys, my bad, I should try to find a solution to automatically cut
off (do some line break) for a long long URL like
http://www.thisSite.com/dir/sudir/a...2727uw82929sk20wllss20-22i9202022=-242728282s
hwith a <TD> element,

so, the HTML (be it 4.01 or 4 transit) like
<table>
<tr>
<td max-width="35%">
http://www.thisSite.com/dir/sudir/a...2727uw82929sk20wllss20-22i9202022=-242728282s</td>
</tr>
</table>
won't give users headache.
-- IE7, FF2 won't support the above setting max of 35% of the current
screen for the TD neither

Many thanks.

Don

Don Li · Dec 18, 2007

Don Li said the following on 12/17/2007 8:25 PM:

Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

Hopefully, you are one of the GG users that can be educated.

Have your server break it down into smaller strings so that it doesn't
exceed a width.

Probably because max-width isn't a valid HTML attribute.

And thank you for not top-posting in the future.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

Oops, sorry about "top responding" but on the "> Have your server
break it down into smaller strings so that it doesn't

exceed a width.", no, that's not an option, why, it's not your URL, you see tons of such URLs out in the web space, and some of them are of interest, hence, you may want to note the long-winding URL, you see what I'm getting at?

Thanks.

Don Li · Dec 21, 2007

I think I do, but not sure. What it sounds like you want is to simply
list the URL itself instead of a link and you want to force word
wrapping in a TD element so that it would look like this:

http://www.thisSite.com/dir/sudir/app.cgi?
param=skkjsjdkskj8290dj29200202hj9230-1-22
20028sduks0202g2727uw82929sk20wllss20-22i9
202022=-242728282s

And the simplest way to do that is to have the server split it up into
smaller strings and display it.

http://www.thisSite.com/dir/sudir/app.cgi?<br>
param=skkjsjdkskj8290dj29200202hj9230-1-22<br>
20028sduks0202g2727uw82929sk20wllss20-22i9<br>
202022=-242728282s<br>

If you absolutely need it to stay intact (for copy/pasting), then use a
textarea and the browser will wrap it for you. But it won't be pretty.
That's for sure.

A very simple solution? A link. A simple link:

<a
href="http://www.thisSite.com/dir/sudir/app.cgi?param=skkjsjdkskj8290dj2920...">
Text</a>

You can make the text whatever you want to "fill the space" you have.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

Sorry for the late response, there seems to be miscommunication.
"server split it up", not a good solution, unnecessary resource use.
Problem is resolved by inserting the <br> tag to break a long-winding
url.

Once again thanks.

Don

I dont get this. Please help me!!	2	Jan 24, 2023
Help with my responsive home page	2	Dec 14, 2022
Fading effect between play and play-over and pause and pause-over	0	Oct 16, 2021
innerHTML forms et FF	1	Sep 23, 2006
Song requests	4	Aug 16, 2023
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
What's wrong with the following code? Thanks	17	Mar 21, 2008
Why does this not fully work? <Textarea> + DIV + InnerHTML	7	Oct 26, 2007

innerHTML and <br>

Don Li

Patient Guy

Doug Gunnoe

Doug Gunnoe

Don Li

Doug Gunnoe

Don Li

Don Li

Patient Guy

Don Li

Don Li

Don Li

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads