innerHTML and <br>

Discussion in 'Javascript' started by Don Li, Dec 17, 2007.

  1. Don Li

    Don Li Guest

    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.
    Don Li, Dec 17, 2007
    #1
    1. Advertising

  2. Don Li

    Patient Guy Guest

    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.


    Don Li <> wrote in comp.lang.javascript:

    >
    > 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
    #2
    1. Advertising

  3. Don Li

    Doug Gunnoe Guest

    On Dec 17, 12:18 pm, Don Li <> wrote:
    > 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
    #3
  4. Don Li

    Doug Gunnoe Guest

    Randy already answered the question. Sorry for the superfluous
    redundant redundancy.
    Doug Gunnoe, Dec 17, 2007
    #4
  5. Don Li

    Don Li Guest

    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>


    On Dec 17, 1:42 pm, Patient Guy <sevisen.adam@gmailDOTHEREcom> wrote:
    > 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.
    >
    > Don Li <> wrote in comp.lang.javascript:
    >
    >
    >
    > > 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.
    Don Li, Dec 17, 2007
    #5
  6. Don Li

    Doug Gunnoe Guest

    As per Randy's post above

    document.getElementById('noteid').value += ' \n';
    Doug Gunnoe, Dec 17, 2007
    #6
  7. Don Li

    Don Li Guest

    Beautiful, thanks.
    On Dec 17, 2:13 pm, Randy Webb <> wrote:
    > Don Li said the following on 12/17/2007 1:18 PM:
    >
    >
    >
    > > 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.

    >
    > 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
    #7
  8. Don Li

    Don Li Guest

    Your approach also works, thanks.

    On Dec 17, 2:36 pm, Doug Gunnoe <> wrote:
    > On Dec 17, 12:18 pm, Don Li <> wrote:
    >

    .... <BR> insertion prob
    >
    > Try
    >
    > function addBR(){
    > document.getElementById('noteid').value =
    > document.getElementById('noteid').value + ' \n';
    >
    > }
    Don Li, Dec 17, 2007
    #8
  9. Don Li

    Patient Guy Guest

    Randy Webb <> wrote in comp.lang.javascript:

    > Patient Guy said the following on 12/17/2007 1:42 PM:
    >> Try this:
    >>
    >> 1. Validate the HTML of your document first (should be done before
    >> even posting).

    >
    > Irrelevant to the problem.


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

    >> 2. Then validate the HTML with the BR element inserted where you
    >> would expect it to be inserted, as if the script had executed.

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


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

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

    >
    > Including, but not limited to, turning everything upside down.
    >
    Patient Guy, Dec 17, 2007
    #9
  10. Don Li

    Don Li Guest

    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/app.cgi?param=skkjsjdkskj8290dj29200202hj9230-1-2220028sduks0202g2727uw82929sk20wllss20-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

    On Dec 17, 6:56 pm, Randy Webb <> wrote:
    > Patient Guy said the following on 12/17/2007 3:11 PM:
    >> 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 18, 2007
    #10
  11. Don Li

    Don Li Guest

    On Dec 17, 11:28 pm, Randy Webb <> wrote:
    > 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.
    >
    > > 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/app.cgi?param=skkjsjdkskj8290dj2920...
    > > hwith a <TD> element,

    >
    > Have your server break it down into smaller strings so that it doesn't
    > exceed a width.
    >
    > > so, the HTML (be it 4.01 or 4 transit) like
    > > <table>
    > > <tr>
    > > <td max-width="35%">
    > >http://www.thisSite.com/dir/sudir/app.cgi?param=skkjsjdkskj8290dj2920...</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

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

    >
    > 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 18, 2007
    #11
  12. Don Li

    Don Li Guest

    On Dec 18, 6:25 pm, Randy Webb <> wrote:

    >


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

    >
    > 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
    Don Li, Dec 21, 2007
    #12
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Frédéric Mayot

    Custom controls and innerHTML

    Frédéric Mayot, Jul 21, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    489
    MattC
    Jul 21, 2004
  2. Hanoi
    Replies:
    1
    Views:
    1,084
    Neredbojias
    Aug 1, 2007
  3. jbonifacejr
    Replies:
    4
    Views:
    3,237
    Neredbojias
    Feb 5, 2008
  4. nick

    innerHTML and images loading

    nick, Sep 20, 2003, in forum: Javascript
    Replies:
    1
    Views:
    90
  5. sonic
    Replies:
    5
    Views:
    271
    Randy Webb
    Jul 11, 2006
Loading...

Share This Page