innerHTML and <br>

D

Don Li

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

Patient Guy

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

Doug Gunnoe

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.
Click to expand...

Try

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

Doug Gunnoe

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

Don Li

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

Don Li

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/
Click to expand...
 
D

Don Li

Your approach also works, thanks.

.... said:
Try

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

}
Click to expand...
 
P

Patient Guy

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

Irrelevant to the problem.
Click to expand...

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

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

Don Li

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
 
D

Don Li

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/
Click to expand...

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?
Click to expand...

Thanks.
 
D

Don Li

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/
Click to expand...

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
 

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

Similar Threads

I dont get this. Please help me!! 2
Help with my responsive home page 2
Fading effect between play and play-over and pause and pause-over 0
innerHTML forms et FF 1
Song requests 4
How can I hide a div using an event listener on multiple checkboxes? 6
What's wrong with the following code? Thanks 17
Why does this not fully work? <Textarea> + DIV + InnerHTML 7

Members online

No members online now.
Total: 48 (members: 0, guests: 48)
Robots: 435

Forum statistics

Threads
473,769
Messages
2,569,576
Members
45,054
Latest member
LucyCarper

Latest Threads

Top